3 Comments

image

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">
    leftside
</div>
<div id="right">
    <div>block one</div>
    <div>block two</div>
    <div>block three</div>
</div>

 

[more]

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: 

$('#left').height($('#right').height()-15);

 

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

Good luck!

kick it on DotNetKicks.com Shout it

Pin on pinterest Plus on Googleplus Post on LinkedIn

Comments

Comment by DotNetKicks.com

Equal column height, div problem

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Comment by DotNetShoutout

Equal column height, div problem

Thank you for submitting this cool story - Trackback from DotNetShoutout

Comment by syngu.com

Pingback from syngu.com

Equal column height, div problem | .NET, CSS | Syngu