I have 3 divs that have to look like on the picture (i did it using float:left; ). 1. is red, 2. is blue, 3. is yellow. In blue div i am loading content using cms, so it can*t have defined height. how to make yellow*s and red*s div height the same as blue*s div height?
here is the solution: <div id="red" style="float:left; width:90px; height:auto; background-color:#FF0000"> <div id="yello" style="float:right; width:60px; height:auto; background-color:#FFFF00"> <div id="blue" style="float:left; width:30px; height:auto; background-color:#0000FF"> <br>hello <br> hello <br> hello <br> hello <br> hello <br> hello <br> hello <br> hello <br> hello <br> hello <br> hello <br> hello <br> </div> </div> </div> HTML: follow the HTML structure
I see three choices: Faux Columns as JOGS already said... a bit difficult if the "red" and "yellow" sides are truly different backgorounds, but can be done. The container holding the floats has the backgrounds, so as Blue extends the height of the container (so, thew container must be wrapping these floats : ), the images representing the Red and Yellow columns seem to extend as well. Choice 2: use a table. Tables are the one HTML element which has its total height (or total row height) determined by any one piece of content. This can be one of those situations where a table gives you the same effect with less HTML code. Choice 3: Can't be seriously used because IE doens't support it, but display: table, display: table-row and display: table-cell in modern (non-IE) browsers takes something which is NOT a table but makes it visually act like one. Sometimes you just tell yourself, I might want to change the design around in the future and don't want to lock it into a table. IE would then need to be sent a different page or design... *edit took another look at softnmore's solution... pretty damn clever. I wonder how well that would work if the columns needed to be in %'s? I think I might try this out in a test page... damn!
softnmore helped me out with my site, im using 2 columns that are stretchable with each other, it works really well