CSS Tips & Tricks

Vertical Navigation Bar Expanding To The Page Height

Saheltech Taking Care of Our E-Business

Vertical Navigation Bar Expanding To The Page Height

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.


Related Posts

  • Layer Scrolling without Horizontal scroll bar
  • CSS what can you do with it?
  • Javascript: what is it for
  • Consecutive Spaces in Text with Dreamweaver
  • CSS in Classified Ads
  • Email This Post Email This Post    |       |    Sphere: Related Content

    Subscribe without commenting

    One Response to “Vertical Navigation Bar Expanding To The Page Height”

    1. Alex Says:

      Thanks for visiting this blog Julie.
      I am not quite sure however how your comment relates to this post. I would be more than honored to help with answers to your questions. However it's not really clear to me what is it . The clearer your question the faster I will be able to respond without having to guess. That would save the both of us some precious time.

    Leave a Reply

    Name (required)
    Mail (will not be published) (required)
    Website
    Comments