CSS Layout

CSS layout is easy to design. We can use CSS layout to design our web page(website) such as home page, contact us, about us, etc.

There are 3 ways to design the layout of a web page:

Div with CSS: fast and widely used now.
Table: slow and less preferred.
Frameset: deprecated now.

A CSS layout can have a header, footer, left pane, right pane, section, and body part.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.header{margin:-8px -8px 0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;} 
.container{width:100%} 
.left{width:15%;float:left;} 
.body{width:65%;float:left;background-color:pink;padding:5px;} 
.right{width:15%;float:left;} 
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;} 
</style> 
</head> 
<body> 
<div class="header"><h2>I2Tutorials</h2></div> 

<div class="container"> 
<div class="left"> 
<p>Left Page</p> 
</div> 
<div class="body"> 
<h1>Body Page</h1> 
<p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p> 
<p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>  
</div> 
<div class="right"> 
<p>Right Page</p> 
</div> 
</div>   
<div class="footer"> 
<p>Footer</p> 
</div>   
</body> 
</html>

OUTPUT:

CSS Layout