HTML Layout
How to create a layout for a webpage using div?
Webpages use different layouts to display content to the user. Layouts are integral part of web building and HTML. Let us learn about how to design a web page layout using HTML and CSS this HTML chapter.
HTML Layout Using Div Tag
Following is an example two column layout. This is a standard layout design for web pages. It has a header, followed by a left column for menu and right larger column for page content display and in the bottom a footer.
<!DOCTYPE html>
<html>
<head>
<style>
#example-header {
background-color:#368E00;
color:white;
text-align:center;
padding:4px;
}
#example-navigation {
background-color:#efefef;
width:100px;
float:left;
padding:10px;
height:300px;
}
#example-content {
width:400px;
float:left;
padding:10px;
}
#example-footer {
background-color:#aaaaaa;
color:white;
clear:both;
text-align:center;
padding:10px;
}
#example-h1{border:none;}
</style>
</head>
<body>
<div id="example-header">
<h1 id="example-h1">Web Page Title</h1>
</div>
<div id="example-navigation">
Lion<br>
Crocodile<br>
Cheetah<br>
</div>
<div id="example-content">
<h2>Lion</h2>
<p>
Highly distinctive, the male lion is easily recognised by its mane, and its face is one of the most widely recognised animal symbols in human culture.
</p>
<p>It has been extensively depicted in sculptures, in paintings, on national flags, and in contemporary films and literature.</p>
</div>
<div id="example-footer">Copyright TutorialWalk</div>
</body>
</html>
Example HTML Layout Output
Web Page Title
Lion
Highly distinctive, the male lion is easily recognised by its mane, and its face is one of the most widely recognised animal symbols in human culture.
It has been extensively depicted in sculptures, in paintings, on national flags, and in contemporary films and literature.
