CSS Dynamic Heights

Question

I have three div tags, a wrapper and two side by side within the wrapper:

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>
</div>

I want to create the condition where the <div id="left"> tag is variable height, stretching the wrapper.

As a result, the <div id="right"> will expand to whatever height the wrapper has become.

What CSS will accomplish this? Thanks!

Note that presentational names such as "left" and "right" can make things messy if you ever change the presentation (what if you later want #right on the left?). Consider semantic names, such as "main" and "sidebar" or the like, which will require less maintenance. — outis, Aug 06 '09 at 19:44
^^ Definitely have to agree there, but I'm sure this was just an example. I hope. — Michael Stone, Aug 06 '09 at 19:46

score 4 · Answer 1 · answered Aug 06 '09 at 19:36

Perhaps I'm late to the party, but it really is simple to do what you describe with pure CSS. The trick is to make #right absolutely positioned and give it a top and bottom of 0. This will stretch it to whatever height #left is giving #wrapper. Here's a complete working example — #left is green, #right is blue, and #wrapper is red, but never seen because it's completely covered by #left and #right. Try removing the bottom: 0; line to see what it looks like without it.

<html lang="en">
  <head>
    <title></title>

    <style type="text/css">
      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px; /* left width + right width */
      }

      #left {
        background: #dfd;
        width: 200px;
      }

      #right {
        background: #ddf;
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="right">
        <p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p>
      </div>
    </div>
  </body>
</html>

+1. Dammit, that's what I was going to say, even down to the colors. Note that setting top & bottom won't work in IE6 (height: 100% does). The chief defect of this approach is that #left must be taller than #right. — outis, Aug 06 '09 at 19:40
I don't mind your approach, but as outis states "The chief defect of this approach is that #left must be taller than #right." That could get messy in some instances if the right div is longer than the left div. Either way, I don't think I'd ever have a need to have my main column and side column ( if that is the concept here ) to be the same heights. I think that is where we all agree. — Michael Stone, Aug 06 '09 at 19:44
@Michael Stone — Doesn't your JS solution have the same issue? In both cases we're effectively setting `#right`'s height to the same as `#left`. If `#right` is taller, it just needs `overflow` set. — Ben Blank, Aug 06 '09 at 20:26

Michael Stone · Accepted Answer · 2009-08-06T19:19:05.867

If you're going to go with Jquery, then you could do this.

$(document).ready(function(){
   var leftHt = $('#left').height();
   $('#right').css("height",leftHt);

});

It isn't css, but it's pretty simple and should work. CSS just wouldn't be able to easily do this, to my knowledge at least.

If you don't already have the Jquery API, just past this above the Javascript.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>

Working example here:

http://michaelpstone.net/development/dynamic-height.html

score 2 · Answer 3 · answered Aug 06 '09 at 18:48

There isn't really a good way for #right to match whatever #left has become. The best way to do this is probably:

<div id="wrapper">
    <div id="right"></div> <!-- note that right comes before left -->
    <div id="left"></div>
</div>

Then have this style:

#left, #right {
    width: 50%; /* Adjust as needed */
#right {
    float: right;
}

This way, #right won't affect the page length but #left always will. However, #right still won't stretch to the length of #left. I don't know what reason you have for it needed to stretch to #left, but I assume it's something cosmetic. I would either try to apply it from #left or from #wrapper instead if you want it to repeat all the way down.

For example, if you want the #left white and #right red:

#left {
    background: #fff;
}
#wrapper {
    background: #f00;
}

The faux column approach is described in: http://www.alistapart.com/articles/fauxcolumns/ — outis, Aug 06 '09 at 19:41

score 0 · Answer 4 · edited May 23 '17 at 11:48

0

The best practical solution is a table - see [this SO question] (Make Two Floated CSS Elements the Same Height).

Of course you may have your own reasons for not using tables...

edited May 23 '17 at 11:48

Community

1
1

answered Aug 06 '09 at 18:58

buti-oxa

11,261
5
35
44

1

Tables are for tabular data! We are in the era of divs and javascript. Can't always rely on tables for design.. – Michael Stone Aug 06 '09 at 19:01
2

You are right, notice all important *always* in your statement. I only use tables when it is practical, and I don't care what era it is now. I prefer simple solution to a complex solution that is in currently in fashion anytime. Notice also that using script for layout is as wrong as using tables for non-tabular data. One can also argue that it is unnatural to insist on equal heights for non-tabular data. – buti-oxa Aug 06 '09 at 19:09

score 0 · Answer 5 · answered Aug 06 '09 at 18:58

If you are trying to do backgrounds or something and thus need the same height, I'd recommend tables. It's much easier. If you must use divs and floated divs, particularly, this article presents about the only way I've seen that works well. It's for three columns, but you can modify it for two:

http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

CSS Dynamic Heights

5 Answers5