HTML and CSS Reference
In-Depth Information
THE BASICS
The wrapper
div
allows us to be a bit more creative here. The background
of the wrapper is used to paint the background of one column, while its left
border is used to paint the background color of the other column. The
vertical border will be done by overlapping the right border of the left
column with the left border of the right column.
Note:
if you have use a fixed width layout (vs. fluid like here), then the
wrapper can be used to create the two background colors as well as the
vertical border at the same time. This is done by using the left border for the
left column, the right border for the right column and the background for the
vertical border. Yes, this means the content box is one pixel wide and that
negative margins are used to pull the columns into place.
MARKUP
<div id="header">
<h2><a href="#">Header</a></h2>
<p>Lorem ipsum...</p>
</div>
<div id="wrapper">
<div id="sidebar">
<h2><a href="#">Sidebar</a></h2>
<p>Lorem ipsum...</p>
</div>
<div id="main">
<h2><a href="#">Main</a></h2>
<p>Lorem ipsum...</p>
</div>
</div>
<div id="footer">
<h2><a href="#">Footer</a></h2>
<p>Lorem ipsum...</p>
</div>
