Equal the size of sidebar and content using jQuery

Question

I've several

<div class="sidebar"></div><div class="content"></div>

The backgrounds of the sidebar and content are different. So, if they are not equal of height, the page behind shows up. I want to equal their heights using jQuery. I've tried it myself, but failed.

Note: The sidebar and the content is a pair. So,

 $('.sidebar').height() > $('.content').height() ? $('.content').height($('.sidebar').height()) : $('.sidebar').height( $('.content').height());
});

wouldn't work. Here, always the first sidebar is compared with the first content (I hope I'm right).

Answer 1

I'd recommend you solve this with CSS. Here are some of the first pages on the subject that I found on Google: one, two

Answer 2

Blixt: As far as I know, this isn't possible to solve with CSS2 as of today.

OP, I recommend you take a look at jLayout - a javascript layout library for jQuery. http://www.bramstein.com/projects/jlayout/

Good luck.

Answer 3

Here is a new version, which works if the content and sidebar pair are siblings (like the code snippet) and the pairs are not inside the same node, as in:

<div>
  <div class="sidebar"></div><div class="content"></div>
</div>
<div>
  <div class="sidebar"></div><div class="content"></div>
</div>


  $(document).ready(function(){
    $('.content').each(function(){
      var sidebar = $(this).siblings('.sidebar');
      sidebar.height() > $(this).height() ? $(this).height(sidebar.height()) : sidebar.height($(this).height());
    });
  });

If the content and sidebar are all siblings as in:

  <div>
    <div class="sidebar"></div><div class="content"></div>
    <div class="sidebar"></div><div class="content"></div>
  </div>

here is another solution based on the location of the siblings:

$('.content').each(function(){
  var sidebar = $(this).prev('.sidebar');
  sidebar.height() > $(this).height() ? $(this).height(sidebar.height()) : sidebar.height($(this).height());
});

Answer 4

Use the Faux Column CSS technique to solve this problem.

Using JavaScript to solve this problem is the equivalent of using a jackhammer to nail a wooden plank to a floor. If your plank is not solid enough (JavaScript is disabled or the browser has a poor implementation), than it breaks (and so does your solution).

Personally I feel that having the JavaScript solution marked as accepted sends the wrong message to people who will stumble upon this page and think it is the best solution to their problem.

The fact that you have multiple sidebars doesn't stop you from using this solution. Given the following:

<div class="contentSidebarPair">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

You can use the following styles:

/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
   #FFF is the bgcolor of your content */
div.contentSidebarPair {
    background: #FFF url('sidebar.gif') repeat-y top left;
    width: 800px;
    zoom: 1; /* For IE */
}

/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.sidebar {
    float: left;
    width: 200px;
}

div.content {
    float: left;
    width: 600px;
}

There! Simple and effective. Absolutely zero JavaScript involved. And if you want to create more complex layouts (liquid layouts), you can adapt this technique using background-position. A tutorial is available here.

Answer 5

First, make sure you're clearing effectively. Something like this should leave you with a site that's usable without javascript.

ONCE YOU'VE DONE THAT, something like this should work:

var sidebarHeight = $("#sidebar").height();
var bodyHeight = ( $("#content").height() );

if ( sidebarHeight > bodyHeight ) {
  $("#wrapper").height(sidebarHeight);
  $("#content").height(sidebarHeight);
  }
else if (bodyHeight > sidebarHeight) {
  $("#sidebar").height(bodyHeight);
  $("#wrapper").height(bodyHeight);
  };

Please note that I'm assuming this is contained in a div#wrapper or something.