Years ago, everybody made a column layout with an Html table. If you do not remember why tables are bad, I recommend reading these nine reasons not to use tables. Today we use (external) cascading style sheets to solve it. Most of the time with the famous ‘faux columns’ trick.

<div id="left">
<div id="right">
    <div>block one</div>
    <div>block two</div>
    <div>block three</div>



The equal height problem is sometimes hard to solve. As you can see here with multiple blocks. The red should be as large as all the yellow blocks together. This is hard to solve with faux columns because the height of the yellow part and therefor the white space between them is hard to determine. It is even more difficult when sometimes the red part is longer then the total yellow part.

The easiest fix for this, is to use a bit of jQuery. I only had to add this single line: 



Here is the final example: http://jsfiddle.net/jphellemons/VTna6/

Good luck!

kick it on DotNetKicks.com Shout it

Post on LinkedIn