Min-height 100% issue, div only 100% of the displayed window, won't extend

Question

I have an issue with my layout: I've done what I normally do to get the main content div to fill 100% of the page and extend even further if there's more content than the height of the viewable page.

The issue is, it fills 100% of the viewable page, but if it extends past that point (adds a scroll bar) then the content div and wrapper div don't extend to take up the rest of the page. I've searched around for a few possibilities as to why it's doing this but I haven't found anything.

You can view the page at http://www.isuckatwebdesign.com and see the layout and css using firebug.

RoR wouldn't cause an issue like this would it?

Answer 1

try

#content { /* remove height: 110% */ overflow:hidden; }

Answer 2

You don't want the content div to have a specific height, you just want it to wrap whatever is inside of it, regardless of how many pages that content might go on for. So, remove your height declaration in your CSS, and add the following to your HTML, just after the right column div:

<div style="clear: both;"></div>

This will force the content div to wrap around the div's it contains. You can of course give this div an id and define the style in your CSS file, rather than inline.