English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS LayoutEasy to design. We can use CSS layout to design our web pages, such as the homepage, contact us, about us, etc.
There are three methods to design web page layouts:
HTML Div+CSS Layout: It is widely used now.
HTML Table:Slower, less popular.
HTML Frameset:Now deprecated.
CSS layout can include the header, footer, left pane, right pane, and content section. Let's see a simple 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>Basic Tutorial oldtoolbag.com</h2></div>
<div class="container">
<div class="left">
<p>Left Sidebar</p>
</div>
<div class="body">
<h1>Content</h1>
<p>Page content is here</p><p>Page content is here</p><p>Page content is here</p>
<p>Page content is here</p><p>Page content is here</p><p>Page content is here</p>
<p>Page content is here</p><p>Page content is here</p><p>Page content is here</p>
<p>Page content is here</p><p>Page content is here</p><p>Page content is here</p>
<p>Page content is here</p>
</div>
<div class="right">
<p>Right Sidebar</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>Test See‹/›Output Effect:
Left Sidebar
Page content is here
Page content is here
Page content is here
Page content is here
Page content is here
Page content is here
Page content is here
Page content is here
Page content is here
Page content is here
Page content is here
Page content is here
Page content is here
Right Sidebar
Bottom