HTML Layout
From w3cyberlearnings
Contents |
HTML - Layout
By using the block with CSS to define a page layout. Page layout is very important for designing a website.
Example TRY-IT
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
margin:0;
padding:0;
}
#container {
width:980px;
margin:0 auto;
}
#content {
clear:both;
min-height: 550px;
}
#top {
width:100%;
height:80px;
clear: both;
background-color:blue;
color:white;
}
#left {
width:120px;
float: left;
background-color:green;
color:white;
min-height: 550px;
}
#body {
width:660px;
float:left;
background-color:gray;
color:white;
min-height: 550px;
}
#right {
width:200px;
float:left;
background-color:green;
color:white;
min-height: 550px;
}
#footer {
border-top: 1px solid #000000;
width:100%;
clear:both;
text-align: center;
}
.titlefooter {
color:white;
font-weight: bolder;
background-color: #00F;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
[LOGO] TOP
</div>
<div id="content">
<div id="left">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div id="body">
<p>
Content here
</p>
</div>
<div id="right">
<p>Right</p>
</div>
</div>
<div id="footer">
<span class="titlefooter">
copyright 2015 abc company, all right reserved.
</span>
</div>
</div>
</body>
</html>
Output
Related Link
- HTML - Tables
- HTML - Box Container
- HTML - Columns
- HTML - Navigation
- HTML - Layout
