Div expands past the bottom of the page, 100% height issue

[masteroleary]

If you look at matthew-oleary.com you can see how everything fills the page 100% vertically. This is the table layout.

 

If you look at matthew-oleary.com/index2.php you will find the css layout. The problem is that the center row div (#content) of the second column (#mainbar) is set to 100% but expands the whole second column past the bottom of the page, creating a scroll bar.

 

What i've failed to accompish is getting the height of the #mainbar area to expand no less than the bottom of the window, and expand taller if needed to display more content.

 

Unfortunately using css for layout is still new to me. I am trying not to use tables.

[SuperBlue]

If you look at matthew-oleary.com you can see how everything fills the page 100% vertically. This is the table layout.

 

If you look at matthew-oleary.com/index2.php you will find the css layout. The problem is that the center row div (#content) of the second column (#mainbar) is set to 100% but expands the whole second column past the bottom of the page, creating a scroll bar.

 

What i've failed to accompish is getting the height of the #mainbar area to expand no less than the bottom of the window, and expand taller if needed to display more content.

 

Unfortunately using css for layout is still new to me. I am trying not to use tables.

 

What you are trying to achive can be done easily using CSS posistion, instead of me going trough your pages, i would like to point you in the direction i would go about almost any layout, being percentage based, fixed, or scaleable (em based layouts). I think CSS position is able to solve just about any problem, sadly IE6 dosent support CSS to well. For multiple column layouts i would definitely go with CSS position!

 

 

The short answer is: Usually many beginners disregard css posistion, because when they experiance how position: absolute; posistion's elements relativly to the edges of the browser, they simply move on, and use other means to achive the effect they want. Usually that means floats and wrappers, or bad work-arounds, which perhaps was good enough in the days of older browsers.

 

Many CSS tutorials about css position is leaving out, the ability to use position: relative; on the basement or wrapper div/container, this allows us to truly take advantage of the position declaration, because suddenly it is placing the elements relativly to the borders of the containing div, instead of relativly to the edges of the browser window, this is the effect most of us are trying to achive anyway.

 

This technique, has the advantage that it dosent matter in which order you putting your divs, as long as they are inside the containing div. As such placing content before your menus in the document, could give searchengines a more suitable view of your page.

 

 

Im not to tell you what to do, but i would recomand ditching support for IE6, and tell your users to upgrade to IE7 or switch browser to either FireFox or safari, which seam to have a solid support for CSS, you could even redirect users using outdated browsers, to a page that explains why they should update.