Question

I have a container div, containing 3 divs, a sidebar, a content and a header while all the elements inside are rendered as they should (they are positioned as “relative” if this may influence in my problem), the sidebar and the content won’t render min-height: 100%; no matter what…

my div won’t stretch with the min-height as it is supposed to…

here is the code: http://jsfiddle.net/vhZV6/4/

as you can see (I put a white background to best recognize it) the div wich is supposed to stretch simply won’t…

Edit: here is a temp site where I tried to implement the solutions… http://www.wabisuke-team.org/Temp/home.html as you can see, all but the last 2 pages (strees and “contattateci”) are rendered as they should, but those 2 while have a messed background image out of the div not resizing as it should…

Edit:
I solved this by putting a min-height in pixels, instead of in percentage, it now works as i wanted it to, thanks everyone for your efforts and for you patience ^^

Answer 1

here is the fiddle with long content http://jsfiddle.net/xM4NC/

and here is with short http://jsfiddle.net/xM4NC/1/

I set body to height 100%, but the content div to min-height 100%. That way it’s parent had a defined height, so that div will be at least as tall as the body, but will grow beyond it if necessary. Then added a left margin and floated the sidebar in that space

body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#content {
    background: #EEE;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 0 20px 0 20px;
    margin: auto;
    margin-left: 180px;
    font: 1.5em arial, verdana, sans-serif;
    width: 960px;
    min-height: 100%;
}

and the html

<div class="header">header</div>
<div class="sidebar1">sidebar</div>
<div id="content">
    text
</div>​