Floating Columns using CSS Border

How to extend a side navigation bar (like this one) to the whole height of the content.

Step 1: Start with the Content

Put the navigation bar and the content into <div>s.

<div id="navigation">
    Navigation
</div>
<div id="content">
    Content<br>
    Content<br>
    Content
</div>

Result:

Step 2: Style the Navigation Bar

We need an absolute width here. Else the following stuff won't work.

#navigation {
    background-color:red;
    width:150px;
}

Result:

Step 3: Move the Navigation to the left

“float” is the answer.

#navigation {
    background-color:red;
    float:left;
    width:150px;
}

Result:

Step 4: Add the Trick-Border to the Content

Instead of “padding-left” or “margin-left” we use “border-left” here.

#content {
    border-left:150px solid blue;
}

Result:

Step 5: Add some Padding to the Content

#content {
    border-left:150px solid blue;
    padding-left:10px;
}

Result:

Step 6: Choose the final Colors

#navigation {
    background-color:#99CCCC;
    float:left;
    width:150px;
}
#content {
    border-left:150px solid #99CCCC;
    padding-left:10px;
}

Result:

That's it. Works in almost any browser. (Netscape 4.x included. Looks weird, but does not crash. That's ok for me.) Tested with: Internet Explorer 5.0/6.0 (Windows), Mozilla 1.0/1.5, Opera 6.0/7.1.

Warning! If you are using more “paddings”, check your code in every browser. This causes very difficult problems in some browsers (Internet Explorer 5.0) due to their weird CSS box model contradictions. The “border” stuff described here works everywhere. “padding” does not.

© Thiemo Mättig, created in November 2003
More HTML and CSS experiments »