I thought when you have a div with height: 100% then it should try to fill up the height to its parents? however, in page: http://www.elementsofbeingfit.com/test_layout.html the nav_left and nav_right can't be filling up to the "mid" div... is there something missing?
Well, you are indeed missing something - percentage heights only work inside containers that have a declared height. Because you have no height declared on body or #wrapper, your % height declarations do absolutely nothing. The problem with that being even trying for height:100% is that it will pull 100% of the WRAPPER, not the available space. From the CSS2 specification: The BEST way to do this is also NOT to use height, but min-height, and a * html hack for IE6 and earlier where min-height isn't implemented, then pad your content top and bottom and 'ride' the content up/down - of course being mixing 100% with padding ends up >100%, you need to use an extra container to accomplish this. confused? good, it's confusing. It's a mess, it's one of the things I hate about CSS layouts. Basically, the HTML for that would end up with a ton of extra DIV's, not work well cross browser, and be so laden with hacks it's nowhere near 'future proof' - sure it could be "faked" with things like faux-columns and so forth, but in general it's more headaches and more complicated than need be. There is a solution - and BOY is it unpopular. We use ONE table. Just one. We do NOT put the header or footer in the table - JUST the columns. 100% height is complex enough without the headache of worrying about tables ignoring the declared heights as well. Try this on for size - it's even content first SEO. http://battletech.hopto.org/for_others/3coltable_SEO/template.html YES, it uses a table - it also happens to be hack free... It uses table-layout:fixed so that content SHOULD render as soon as available, and frankly that anti-table arguement holds about as much water as a steel sieve. Some people will post some faux-column techniques which are fine if you only want flat colored backgrounds - but in general that code is huge, buggy, and hack laden... When the solution is a hammer, don't raid Imelda Marcos' closet for high-heeled shoes destroying one after another trying to get the job done.
it seems that some people will use a gif file as background and repeat it and it can fake it as the background color and it will fill up the whole column?
i found that another way is, if i can accept LEFT and RIGHT NAV both have the same background color, then I can use background: green for the mid ID....