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.


<!DOCTYPE html>  
padding: 20px;  
text-align: center;  
.header h3{  
font-size: 20px;
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;  
float: left;  
width: 50%;  
min-height: 200px;  
background-color: pink;  
text-align: center;  
text-align: center;  
float: right;  
width: 50%;  
min-height: 200px;  
background-color:  white;  
text-align: center;   
padding: 10px;
.footer p{  
color: white;
<div class="header">  
<!-- Nav -->  
<div class="nav">  
<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>  
<!-- main -->  
<div style="height:200px">  
<div class="lside">     
<h2>HELLO WORLD!!</h2>    
<!-- side -->  
<div class="rside">  
<h3>How are you today?</h3>   
<!-- footer -->  
<div class="footer">  
<p><strong>©Copyright W3spoint.com</strong></p>  



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

Please Share