div height alignment

[Spunky]

Alright so I know this topic is a toughie. I've done all sorts of Googling on this and found all sorts of similar issues; ones that were close to mine I've attempted. Let me just show you my problem: The image header, left chrome section, the text section, and the green footer section are all left floating divs inside a single container div. I want the text div to adjust according to its content and the left chrome div to adjust with it. I know my code is essentially correct because take a look at what happens as I zoom out: ZOOM ONCEYou see that the left chrome div has expanded in height, properly scooting the green footer div into its proper place. ZOOM AGAINAs I continue the zoom out, the left chrome div continues to grow. To accomplish this I've set the html and body elements as well as the left chrome div and text div and the siteWrap div (that wraps everything) all to 100% height. It seems though that only thing that is following this is the left chrome div. I realize though that if there isn't much content, I do not want everything to expand that high. However, if I remove the height:100%; from the siteWrap div, the left chrome div shrinks to wrap its contents and the others scoots left. Honestly, think the issue comes down to not being able to get everything to completely be inside the siteWrap div. I know this because if I put a colored border around it, it doesn't quite wrap everything. So perhaps that is the core issue? Ultimately, I just need everything to align evenly on bottom if possible. Well, here is a mock-up of how the HTML is written:

<div id="siteWrap">  <div id="sideColumn">  </div>  <div id="header">  </div>  <div id="mainContent">  </div>  <div id="footer"></div>  </div></div

And the css:

body{font-family:Calibri, Verdana;background:#000;}#mainContent {background-color:#FFF;padding:5px;float:left;width:970px;}body, html{height:100%;}#siteWrap {width: 1200px;margin-right: auto;margin-left: auto;display:box;height:100%;border:5px solid red;}#header {background-image: url(images/night_house1.jpg);width:980px;float:left;height:425px;position:relative;}#sideColumn {background-image: url(images/chrome.jpg);background-repeat: repeat-y;float: left;width: 220px;height:1000px;padding-top:25px;text-align:center;height:100%;}#footer{height:50px;background-color:#0F3;width:980px;float:left;}

[dsonesuk]

the side column, wrap is set to height: 100% to match height of browser window, the content goes beyond this, but when you zoom out, the content is reduced, and the height reduces until the the whole page fits within the browser window, and the side column and wrap will now match, and fill to this exact browser height as they have been told to do. try it with this

body{font-family:Calibri, Verdana;background:#000;}#mainContent {background-color:#FFF;padding:5px;float:right; /* amended by dsonesuk*/width:970px;}body, html{height:100%;}#siteWrap {width: 1200px;margin-right: auto;margin-left: auto;display:box;/*height:100%; removed by dsonesuk*/border:5px solid red;background-image: url(images/chrome.jpg);  /* moved by dsonesuk*/background-repeat: repeat-y;/* moved by dsonesuk*//*background-color:#999999; removed by dsonesuk*/overflow:hidden;}#header {background-image: url(images/night_house1.jpg);width:980px;/*float:left; removed by dsonesuk*/height:425px;position:relative;}#sideColumn {float: left;width: 220px;/*height:1000px; removed by dsonesuk*/padding-top:25px;text-align:center;/*height:100%; removed by dsonesuk*/}#footer{height:50px;background-color:#0F3;width:980px;float:right; /* amended by dsonesuk*/}

[Spunky]

The overflow in siteWrap fixed the issue of it completely holding it's contents. The header, with no float, is showing all the way to the left, causing the left column to completely disappear. With either float in the header, the left column is correctly placed but is only the size of it's contents. There's nothing to indicate it being larger though.

[dsonesuk]

Sorry, i changed it in firebug, to fill entire width, and then realised you wanted on the side, but forgot to change it, float it to the right. The left column will never match the height of the main content, unless its own content does so. What i have done is by using the wrapper, which will always be to the highest content, either in sidecolumn or main content container, so by added the background image to this, on the left, repeating down, it gives the illusion that the side column always matches the main content height.

[Spunky]

Oh I missed that part where you moved the background image. Very clever work-around! Thank you! I don't know why I didn't think of this, I was thinking maybe just dealing with putting it in the way background, but I didn't want it to be that long. So thank you!