CSS Layout

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

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

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

A CSS layout can have header, footer, left pane, right pane and body part. Let's see a simple example of CSS layout.

CSS layout 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>JavaTpoint</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>
<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>
<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>

Test it Now

Output: