Min-height hack with floats

Go To StackoverFlow.com


I'm trying to do something like the min-height hack, but I have two floats that seem to be conflicting with it:


My "innercontainer" div is very short, I would like it take up as much as as possible (or at least, more space) without setting the height in pixels because my page content changes from page to page...

2012-04-03 22:25
by redconservatory


set overflow:auto instead of visible, so that .innercontainer expands to accommodate its contents.

demo at http://jsfiddle.net/gaby/vqFVU/2/

If you want a sticky footer as well look at http://www.cssstickyfooter.com/

2012-04-03 22:29
by Gabriele Petrioli
I actually don't want the sticky footer in this situation because of some other design issues...but is it possible to make the .innercontainer longer without setting a pixel height - redconservatory 2012-04-03 22:40
what do you mean longer ... How much longer.. with what restriction on how short/long should it be ? the example above just shows how to make it at least the same as it contents.. if you add padding-bottom you can extend it event more example (height is not needed - Gabriele Petrioli 2012-04-04 11:48
I see what you mean.. - redconservatory 2012-04-05 13:53



javascript is the easiest way. You cant do that with pure CSS since every client can have a different size window.

2012-04-03 22:36
by JohnWolf