Equal Height Columns with Bottom Border and Margin
Note committed on 16 April 2011, tagged css, jquery
As probably all web developers, I have been stuck with this problem for quite a while: how to make two columns equal height (to draw a line between them, color them, .. whatever).
First I used the most popular margin:-value, padding:+value technique, but quickly discovered that internal anchors are not working. Further internet researching has shown solutions so huge and so hacky (pure CSS abuse), so I just wrote these two lines of jquery code to make both columns equal height. All of the problems (bottom border, anchors, margin/padding weirdness) disappeared instantly.
c1 = $("#left-column").height();
c2 = $("#right-column").height();
if(c1>c2) $("#right-column").height(c1)
else $("#left-column").height(c2);
});
======= Add new comment =======