Division Structure and Layout
Basic structure
The example below is a simple three column layout created by using two floats.
Division structure in the XHTML file:
<div
id="banner">
</div>
<div
id="navigation" style="float: left; width:
8em;">
</div>
<div
id="sidebar" style="float: right; width:
8em;">
</div>
<div
id="main">
</div>
<div
id="footer" style="clear: both;>
</div>
What the page layout would look like:
Banner, which stretches across the full page width
Navigation
Item One
Item Two
Item Three
Item Four
Item Five
Item Six
Item Seven
Item Eight
Item Nine
Item Ten
Item Eleven
Item Twelve
Item Thirteen
Sidebar
Item One
Item Two
Item Three
Item Four
Main
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Footer, which stretches across the full page width
Using a wrapper
The example below uses fixed widths and a wrapper to create a three column layout. The wrapper and fixed widths stabilize the floats so they will not drop.
Division structure in the XHTML file:
<div style="width: 610px;">
<div
id="banner">
</div>
<div id="wrapper" style="float: left; width: 455px;">
<div
id="navigation" style="float: left; width:
150px;">
</div>
<div
id="main" style="width: 300px; float: right;">
</div>
</div>
<div
id="sidebar" style="float: right; width:
150px;">
</div>
<div
id="footer" style="clear: both;>
</div>
</div">
What the page layout would look like:
Banner, which stretches across the full page width
Main
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah blah blah blah blah blah blah, blah, blah, blah, blah, blah, blah
Footer, which stretches across the full page width