expanding div?
 

Hello everyone,

How do I make it so a div is at least so many pixels high and it will auto adjust for over flow?

Right now my blog, http://www.natefico.com
has it so that both divs height are to auto.
As in the main box is on auto height and so is the div which contains the post. Only problem is that the majority of my blog posts are not long enough. I do not want to just add line breaks to make it bigger.

Is there a way I can set the .main to so many pixels high, but when the post div overflows that the height of .main adjusts?

Thanks,
--Natefico

I too have been fighting with this same senario for a long time. Sadly I have not found a way that works on all of the big 3. IE, Firefox, and Safari. You are kind of stuck in a "pick any two" situation. There are certain ways to get it to work for any two browers but the third one which varies by the method used will break it. For my own website, I set it up so that it works under IE and Firefox by default and then I have browser detection for Safari. Browser detection will require either Javascript or a server side language like PHP.

Basically you want to specify a "min-height" and then have the regular height set at auto.

[PHP]
if( Browser() == "Safari")
echo("<div style='width: 80%; min-height: 800px; height: auto;
float: left; background-color: #FFFFFF; background-repeat: repeat-y; padding: 0px; position: relative;'>");
else
echo("<div style='width: 80%; min-height: 800px; height: auto !important; height: 120%;
float: left; background-color: #FFFFFF; background-repeat: repeat-y; padding: 0px; position: relative;'>");
[/PHP]

min-height is a W3 Standard so why doens't it work in IE? I used min-height to fix it, but only works in FF. Solution to get this to work in IE? I do not really mind not having Safari support.

http://www.cssplay.co.uk/boxes/minheight.html

Rather than using hacks like this though, I tend to use a simpler method
to simulate 'min-height' on divs: