Make Two Floated CSS Elements the Same Height

Question

I have two elements which can vary in heights and both floated next to each other. The problem is that it looks pretty ugly if one box is higher than the other. So I want them to be the same height.

One way I thought might work would be too to wrap them in a container div and hope the taller one resizes it and the smaller one expands to fit the space:

HTML:

<div id="outerBox">
<div class="innerBoxLeft"></div>
<div class="innerBoxRight"><br /><br /><br /></div>
</div>

CSS:

.outerBox
{
width: 100%;
}

.innerBoxLeft
{
float:left;
width: 45%;
height: 100%;
}

.innerBoxRight
{
float:right;
width: 45%;
height: 100%;
}

Doesn't work. I believe this may be because the outer div doesn't have a set height and for some reason the smaller box and it's 100% height has nothing to work on. I cannot give it a set height however because that would defeat the point.

So unless there is a another way, I guess I am asking: How can I set a child element's height to that of it's parent?

Thanks

Answer 1

One way to do the following without using JavaScript is via a technique called Faux-Columns.

It basically involves applying a background-image to the parent elements of the floated elements which makes you believe that the two elements are the same height.

More information available at:

A List Apart: Articles: Faux Columns

Answer 2

function evenup(){
        var maxHeight = Math.max.apply(null, $(".myClass").map(function (){
            return $(this).height();
        }).get());  
    $(".myClass").height(maxHeight);
}

Answer 3

function setSameHeight(class_name){
  var max_height = 0;
  var cards = getElementsByClassName(class_name);       
  for (var i=0; i<cards.length; i++){
    if (cards[i].offsetHeight > max_height){                
      max_height = cards[i].offsetHeight;
    }
  }
  for (var i=0; i<cards.length; i++){
    cards[i].setAttribute("height", max_height);
    cards[i].height = max_height;           
  }
}

function getElementsByClassName(className){
  var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
  var allElements = document.getElementsByTagName("*");
  var results = [];
  var element;
  for (var i = 0; (element = allElements[i]) != null; i++) {
    var elementClass = element.className;
      if (elementClass && elementClass.indexOf(className) != -1 &&     hasClassName.test(elementClass))
      results.push(element);
    }
    return results;
}

used that for tables

Answer 4

Percentages rarely work as heights in CSS. To make the child height the same as their parent, you can use a bit of Javascript. Here's what it would look like in jQuery:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function() {      
            var containerheight = $("outerBox").height;
            $(".outerBox").children().css("height",containerheight)
    </script>

If you wanted to just make the boxes within a container the same size, the Filament Group has a great plugin for equalizing box heights with jQuery and it's very well documented:

Equal Heights With jQuery

Answer 5

I think that tables should be used for what they were created for - and that is storing data, not showing layout.

If You want good, cross-browser & hack-free CSS solution - check this article.

Answer 6

If you really wanted a div to act like a table, you can just customize the css "display" of the div.

display:table for the container div

display:table-cell for the div inside to act as td