DIV height vs. height of the screen

[moltar]

I have a menu div that is on the left. The height is 100%. It has a background color. It displays it 100% high, but it takes the size of the screen for the height. The menu is shifted down 150 pixels from the top of the screen.

When there is little text on the page, menu extends over the bottom of the screen by 150 pixels. When there is a lot of text, then menu just ends at exactly 100% and is blank all the way down.

How can I make it work all the time? Meaning that it has colored menu no matter what - if there is lots of text, or even if there is just a little text.

Hard to explain, sticky me for an example.

[phoenix09]

To get the effect you are looking for with divs you have to have the left nav bar div tag be the primary content container I believe, with the content div as a sub div to that primary div. This makes the content div expand the primary container div, and if you have the background color set in that primary container div to the currently background color of the left nav div it creates the illusion of 2 separate columns.

To take this effect to 3 columns is extremely difficult, and doesn't look all that good from what I've seen, and won't run reliably on all browsers.

Realistically divs just don't work very well for this kind of page construction, if you care about the look of the page, you have to do all kinds of tweaks like that to get the look you want. Whereas tables work perfectly for this kind of page construction. Saying this is kind of taboo since the 'rules' say that you shouldn't use tables for page construction, but the bottom line is that if you use tables you will have no display issues at all, everything you are trying to do will work perfectly, in all browsers out there.

If you think of these tags as page construction options rather than hard and fast laws, you'll find that tables work pretty well for page layout, and have no problems of the sort you are having (in your case, if your left nav and content where contained in 2 td cells on the same row, they would automatically expand to fit the maximum height of either element, no tweaks required, no display problems in certain browsers.

That's because when they made the div specification they didn't bother checking how real web pages are made, and didn't consult designers, so the result was a tag that works extremely well for horizontal layouts, that's stacked divs, but not nearly as well for vertical layouts like columns.

I've made totally complex div based layouts, much more complicated than this, but it's totally a pain, takes much longer to create and debug, and achieves exactly zero in terms of page look or functionality. To me it's just an experiment in learning CSS, nothing more.

I've found the best use of divs is to use them pretty much as their creators intended them to be used, stacked on top of each other to create content divisions.

[moltar]

To solve the problem, I just took an image that looks like menu and tiled it vertically as a background, which now looks like my menu continues.

[phoenix09]

That worked, you could do the same by just applying the correct background color to the main container div as well.