Home > Tips 'n trick > Fix CSS 2 column height problem with jquery

Fix CSS 2 column height problem with jquery

Take a look for “normal” CSS 2 column example here.

Normal CSS 2 Column

Normal CSS 2 Column

Now, the question is “What if the main/leftside is shorter than the sidebar?”, then you’ll get something like this.

CSS 2 Column Different Height

CSS 2 Column Different Height

That’s the problem, the div (left and right) doesn’t know and cover each other, it’s different with Tables layout. But don’t worry, it can be fix with little jQuery trick by compare each side height.

Here’s the code:

<script language=”javascript”>
$(document).ready(function() {

// CSS height fix
var left = $(“div#main”).height();
var right = $(“div#sidebar”).height();

if(left > right)
$(“div#sidebar”).height(left);
else
$(“div#main”).height(right);

});
</script>

The final result is here.

CSS 2 Column jQuery Fix

CSS 2 Column jQuery Fix

Advertisements
Categories: Tips 'n trick Tags: ,
  1. November 21, 2009 at 4:00 am

    apa-apaan ini??? ga ngerti gw… wakakakak…. lw kuliah napa…. di tanyain tuh ma dosen nya :p

  2. [H]
    November 23, 2009 at 8:13 am

    beuh pasti les di L*A

  3. Azhari Harahap
    November 23, 2009 at 10:59 am

    In English please, wkwkwkwkwk…

  4. November 24, 2009 at 7:26 am

    ini tugu mas…. klo mau turun ya sekarang….. wakakakak

    comment spam biasanya…

    nice info. thanks :p

  5. November 30, 2009 at 2:45 pm

    opunk :
    ini tugu mas…. klo mau turun ya sekarang….. wakakakak
    comment spam biasanya…
    nice info. thanks :p

    please don’t say that quote again ya….
    ckckckckck

    NEXT DESTINATION….ARE YOU READY…..:D

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: