Being easy to design, the CSS layout is used by web designers to design a web page. A CSS layout generally consists of the header, footer, left pane, right pane, and body part. The layout of a web page can be designed in either of the 3 ways:
- HTML Div with CSS: This way of designing the layout of a website is fast and is popularly used nowadays.
- HTML Table: This way of designing the layout of a website is slow and is less preferred nowadays.
- HTML Frameset: This way of designing the layout of a website is deprecated now.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
.header{
padding: 20px;
background-color:crimson;
text-align: center;
}
.header h3{
color:white;
font-size: 20px;
}
.nav{
background-color:gray;
padding: 5px;
}
.nav li{
list-style: none;
display: inline-block;
padding: 8px;
}
.nav a{
color: white;
}
.nav ul li a:hover{
text-decoration: none;
color: blue;
}
.lside{
float: left;
width: 50%;
min-height: 200px;
background-color: pink;
text-align: center;
}
.rside
{
text-align: center;
float: right;
width: 50%;
min-height: 200px;
background-color: white;
}
.footer{
background-color:#455e64;
text-align: center;
padding: 10px;
}
.footer p{
color: white;
}
</style>
</head>
<body>
<div>
<div class="header">
<h3>LAYOUT EXAMPLE</h3>
</div>
<!-- Nav -->
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li style="float: right;"><a href="#">SIGN-IN</a></li>
<li style="float: right;"><a href="#">SIGN-UP</a></li>
</ul>
</div>
<!-- main -->
<div style="height:200px">
<div class="lside">
<h2>HELLO WORLD!!</h2>
</div>
<!-- side -->
<div class="rside">
<h3>How are you today?</h3>
</div>
</div>
<!-- footer -->
<div class="footer">
<p><strong>©Copyright w3schools.com</strong></p>
</div>
</div>
</body>
</html>
Explanation:
In the above example, we are creating a website layout using the HTML Div with CSS method.