geeky notes on web (drupal) and .net (c#) programming, whichever prevails at the moment

 

All commits tagged "jquery"

 

Equal Height Columns with Bottom Border and Margin

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.

$(document).ready(function() {
  c1 = $("#left-column").height();
  c2 = $("#right-column").height();
  if(c1>c2) $("#right-column").height(c1)
    else $("#left-column").height(c2);
});

}