CSS Layout

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 the body part. The layout of a web page can be designed by 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 W3spoint.com</strong></p>  
</div>      
</div>  
</body>  
</html>

Output:

Explanation:

In the above example, we are creating a website layout using the HTML Div with CSS method.

Please Share