There are two "inside" elements #content and #sidebar, which are inside #inner. The taller one #content sets the height of the outside element, but I really want #sidebar to be the same height. The example is here where I want the teal sidebar to be the same height as the white content section.

I run into this a lot with WordPress and never have found what I consider a elegant way to deal with it. I do recognize I could use a single vertically repeating background image attached to #content or #inner but in some situations I have a several columns of varying height I want to line up.

3 answers

This was chosen as the best answer

CSS alone cannot do this. You'll need the help of some javascript to detect the #content height and then apply an inline style to #sidebar to match it. Using jQuery here is an example:

$(document).ready(function() {
     var contentHeight = $("#content").height();
     $("#sidebar").css("height", contentHeight);
Answered about 8 years ago by Artistic Abode
  • Awesome! Thank you. I'd really hoped for a CSS way to do it, but I'm just starting to learn JS/JQ and that makes perfect sense. Jon Brown about 8 years ago
  • I think you'll find, in many cases, especially depending on browser support (for example, for IE7+), there are a number of CSS only solutions. See my answer for a few. Ktash about 8 years ago
Ktash 1851

What you're talking about (I think) is Faux Columns, and it is a very common styling problem. There are a few solutions that exist for problems of this sort, including pure CSS solutions. My favorite, which requires no hacks, is Conflicting Absolute Positions. You can also use the article I linked to before, which has some other solutions which are also very good.

Answered about 8 years ago by Ktash
  • Thanks for this, I'd never seen the conflicting absolute positions, but I don't think that'd work solve these problems... I'd need the absolute position relative to a div, not the page... maybe it'd work that way too though, it's certainly interesting enough I'll fiddle with sometime. Thanks again Jon Brown about 8 years ago
  • I've done it for multi-column solutions myself. But looking closer at your code, and thinking about your example, it might be easier to just wrap it in a div with position: relative, and set the sidebar height to 100%. Ktash about 8 years ago

There is a CSS only solution to this, but it doesn't work in IE before version 8:

#inner > div { display: table-cell; }

<div id="inner">
    <div id="sidebar">
        <!-- Sidebar content -->
    <div id="content">
        <!-- Main content -->

Both child elements of #inner will always be the same height.

See the recent SitePoint post Give Floats the Flick in CSS Layouts for a more complete introduction.

Answered about 8 years ago by Rob Crowther