•  11-09-2019
  •  | 
  •  

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!

Was it helpful?

Solution

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

OTHER TIPS

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>

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 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...

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top