Back

Layout of a Basic Web Page Using Floats, Clears, and CSS
example of a web page layout HTML CSS Rules

<div id="wrapper">

 #wrapper {width: 996px;
margin-right: auto;
margin-left: auto;
border: thin solid #666;
background-color: #FFF;}

<div id="header">
content</div>

#header {height: 90px;
background-color: #d8dc9b;}
<div id="nav">
content</div>		 #nav {background-color: #515a2d;
height: 36px;
color: #FFF;}
<div id="content"> #content {float: left;
width: 75%;}
<div id="content-inner">
content</div>		 #content-inner { background-color: #CFC;
margin: 5px;
padding: 10px;
border: thin solid #000;
vertical-align: top;
min-height: 340px;}
<div id="sidebar"> #sidebar {background-color: #D8DC9B;
float: right;
width: 25%;}
<div id="sidebar-inner">
content</div>		 #sidebar-inner {margin: 5px;
padding: 10px;
border: thin solid #000;
vertical-align: top;
min-height: 340px;}
<div class="clearfloat"> </div>
 .clearfloat {clear: both;}
<div id="footer">
content</div>		 #footer {background-color: #D8DC9B;
height: 50px;}