CODEWITHSUNDEEP
csshtmlheight
Kris
Kris

Reputation: 575

2 DIV Container with the same height

I want to get the same height on two different div which are together in one parent div. Let me show you the simple code before I explain it detailed:

<div id="wrapper">
  <div id="box_one">
  ...
  </div>
  <div id="box_two">
  ...
  </div>
</div>

#wrapper{
  width:1170px;
  margin:0 auto;
  text-align:left;
}
#box_one{
  width:860px;
  background-color:#FCFCFC;
}
#box_two {
  float:left;
  width:310px;
  background-color:#FCFCFC;
}

so thats how the code look in basic. Now let me get to the problem. The first div#box_one will have dynamic content - I can't say how much it will be - same for #box_two. But I still want boths div to share the same height. min-height is here not a useful solution and setting the wrapper+body+html to height: 100% and both of those dov too isn't even worth an idea since it will crash the other layout.

So is there any way or do I have to find another way instead of using two div?

Upvotes: 0

Views: 350

Answers (2)

Umer Farook
Umer Farook

Reputation: 368

It is better to use just a few lines of jQuery code for that, result is the best

    $('.parent-div').each(function(){  
        var highestBox = 0;
        $('.child-div', this).each(function(){

            if($(this).height() > highestBox) 
                 highestBox = $(this).height(); 
            });  

            $('.child-div',this).height(highestBox);
    });

Upvotes: 0

m59
m59

Reputation: 43795

Live demo here (click).

All you really need is display: table-cell. 

.foo {
  display: table-cell;
  width: 49%; /* not exact, just for this example */
  vertical-align: top;
}

<div class="foo">Some stuff in here.</div>
<div class="foo">Other stuff in here.</div>

Upvotes: 4

Related Questions