HTML/CSS set div to height of sibling
I have 2 div's contained in a third. One of the contained div's is floated left, the other floated right. I would like the 2 sibling div's to always be at the same height, but am having a problem with this. So far I am only viewing the page in Firefox, and figured I'd worry about any cross-browser issues after I get it working in at least one browser.
Here is the markup:
<div id="main-container" class="border clearfix">
<div id="left-div" class="border">
...
</div>
<div id="right-div" class="border">
...
</div>
</div>
Here is the CSS:
#main-container { position: relative; min-height: 500px; }
#left-div { position: relative; float: left; width: 700px; min-height: inherit; }
#right-div { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }
.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; _height: 1%; clear: both; }
.clearfix { display: block; clear: both; }
.border { border: solid 1px #000; }
If the content in the #left-div
is longer than 500px
, the #right-div
does not expand to match. In an example I tried, Firefox said the computed style height of the #main-container
was 804px
, the computed style height of the #left-div
was 800px
, and the computed style height of the #right-div
was 586.2px
, as it had expanded to fit it's own content.
I understand I might be going about this the wrong way, and if this is a duplicate questions then I apologize, but I wasn't quite sure what to search under.
Solution 1:
I can rack my brain all I want, but I think this can really be solved only using table behaviour, i.e. using <table>
s (if you need to be IE6 and IE7 compatible) or display: table / table-row / table-cell
(which is effectively the same thing but won't embarrass you in front of your peers because tables are evil. ;).
I'd go for a table.
Feel free to prove me wrong and post a sane CSS solution, I'd be delighted!
Solution 2:
If you know which of the inner div's you want to set the height of the page layout you can do something like this: http://codepen.io/anon/pen/vOEepW
<div class="container">
<div class="secondary-content">
<div class="content-inner">
</div>
</div>
<div class="main-content">
</div>
</div>
Setting the containing div to position: relative and then setting one of the inner divs to position absolute allows the other, "un-styled" div to effectively control the height of both.
.container {
position: relative;
}
.main-content {
width: 80%;
margin-left: 20%;
height: 300px;
background-color: red;
}
.secondary-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 20%;
overflow-y: scroll;
}
It is also possible to do this, and perhaps easier using flexbox, but that has some browser support issues.
Solution 3:
First thing you should ask yourself is - Why do you need them to be at the same height? Is it because:
- You want the background to be the same size?
- The middle border to be the same height?
- Or is there some content on the bottom that needs to be displayed inline with bottom of the other div?
1) If you want the background to be the same size, then i advise you to CSS style the parent div, and at worst - edit the background image so it fits. With CSS2 you can position the background easy
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
2) Whenever i stumble upon your problem, i need the center border to be the same height. The solution is easy- apply the border style to the DIV that will be longest.
3) Merge both of the content to a third sibling DIV, if you cant, then you will need JavaScript.
OR as Pekka said - use display: table
if you don't care about IE.
Solution 4:
I ran into this issue several times this week and this topic was the closest I came to finding a concrete answer. This is an expansion on @Pekka's response for those who need a bit more to go on, I certainly did.
jsFiddle
example html:
<div class="view-table">
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">
Lorem ipsum dolor sit amet, at assum gubergren his,
ex iudicabit dissentiunt intellegebat has. Ne odio detraxit
instructior vim. Fugit velit consetetur an eos.
Ea suas veri mnesarchum mel.
</div>
</div>
</div>
example css:
.view-table
{
display:table;
width:100%;
}
.view-row
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.view-name
{
text-align:right;
background-color: lightblue;
}
.view-type
{
background-color: pink;
}