CSS Tips & Tricks

How to make the vertical navigation column expands through the entire height of the web page with CSS. That’s question often asked time and time again on various forums.

While this can be easily achieved with table-based web page layout, it can be tricky when using CSS instead. As a matter of fact maintaining columns of same height when one of them is expanding vertically is quite a bit of a challenge in CSS without the use of javascript.

The graphic below illustrates the look-and-feel we want to create:

As you can see, we want the left naigation bar (orange strip) to expand vertically to the bottom of the page. To achieve that result, here is a snippet of the CSS code needed to create that layout.

<div style="position:relative; background:url(../images/bg-vnav-css.gif) repeat-y 0px 0px; width:800px; height:auto; ">
<div style="position:relative; top:0px; left:0px;background:#007F00; width:100%; height:80px; text-align:center;">Page Header .. </div>
<div style="position:relative; display:inline;left:0px; top:0px; float:left; clear:left; width:180px; height:auto; ">Links… </div>
<div style="position:relative;display:inline; left:20px; top:0px; float:left; clear:right; with:600px; height:auto; ">Page Content ..</div>
</div>

The important point here is the main container’s background image (bg-vnav-css.gif) set to tile vertically only (repeat-y) starting from the top left corner of the web page (0px 0px). When the web page expands vertically your web site visitor gets the illusion that the navigation bar is also stretched vertically. In reality it’s the background image of the main container box that is tiling vertically.

The rest of CSS rules set the alignment of different areas and their respective formatting.

This entry was posted on Friday, December 29th, 2006 at 8:03 pm and is filed under CSS Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.