Getting a DIV to stretch 100% - Problems when scrolling

[lordcamel]

Hi guys,

I'm trying to create a 2 column layout for a site. The left div is for navigation, and contains a faux-column style repeat -- my goal is to have it be 100% of the body/document height all the time, NOT just the browser viewport height..

The right div is for content, and will have a variable height for each page.

Browse below to see my problem:
http://www.bogies-bar.com/b/twocolumnproblem.html

Be sure to size your browser so that there's a scrollbar. You'll see that scrolling down breaks the 100% height of the navigation, leaving a clean cut.

Does anyone know how to make the navigation div ALWAYS be 100% of the document height, even when the content on the right is very extensive?

Thanks so much =]

[drewpark88]

Well you could possibly try making a class for that div in your CSS. Like the following:

div.container {
width: 100%;
}

[Cragdo]

One way you could achieve this is by setting the left border of your wrapper to the same width as your nav class and then use positioning or negative margins in your nav class to overlay the border.

wrapper{
border-left:solid 200px #4c4c4c;
}

I haven't tried this myself and you will have to change your wrapper width to compensate for the 200px border but this will give the illusion that your nav div stretches the full height of your wrapper.

[cfajohnson]

http://cfaj.freeshell.org/testing/xxx.html

[macneato]

Here is the fix you will need, just update your css to the following;

* {
            margin: 0;
        }
        
        html, body {
            height: auto;
        }
        
        body {
            font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
            font-size: 75%;
        }
        
        #wrapper {
            background: url(http://www.bogies-bar.com/b/themes/bogies/images/bg_repeat_nav.png) repeat-y;
        }
        
        #nav {
            border-left: 2px solid #666;
            border-right: 2px solid #666;
            width: 200px;
            margin: auto;
            float: left;
            height: 100%;
            color: white;
        }
        
        #main {
            border: 2px dotted black;
            position: relative;
            margin-left: 215px;
            width: 700px;
            height: auto;
        }

Only issue you will have now are those two borders, the quickest fix would be just to add them to your nav background image