Reputation: 575
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
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
Reputation: 43795
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