Reputation: 41

2 divs side by side, each 50%, same height

I would like to place two divs within a container side by side and - thanks to SO - I feel I'm almost there, but there is something I really don't understand.

The html looks like this:

<div class="parent">    
 <div class="font" id="left"></div>
 <div class="font" id="right"></div>
</div>

CSS looks like this:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    height: 100%;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    height: 100%;
}
.parent{
    font-size:0;
    margin: 0;
    height: 40px;
}
.font{
    font-size:16px;
}

font-size needs to be 0 to account for the whitespaces. display is set at inline-block (I'd rather use display than float).

This works fine. It keeps working when I add content to both the left and the right block. However, when I add content to only one block, this block gets strangely offset from the top. It's like adding margin-top: 50px or something. And I don't get why.

Here's the JSFiddle with content in the left block: https://jsfiddle.net/dave_s/phon1tws/

I've also tried overflow:hidden, but that shrinks the block with the content.

Any help would be much appreciated! Also if someone could explain to me what happens here, that'd be really great!

Thanks a lot!

Upvotes: 4

Answers (5)

Marc Audet

Reputation: 46785

Alternatively, you can use CSS tables. Your mark-up lends itself nicely to the technique.

The main advantage is that you don't have to alter the font sizes to compensate for the white space that can show up between inline blocks.

Having said that, both approaches will work in your situation.

body {
  margin: 0;
}
.parent {
  display: table;
  width: 100%;
  height: 40px;
}
#left, #right {
  display: table-cell;
  vertical-align: top;
  width: 50%;
  height: 100%;
}
#left {
  background: lightblue;
}
#right {
  background: orange;
}

<div class="parent">
  <div class="font" id="left">Left Blue</div>
  <div class="font" id="right">Right Orange</div>
</div>

Upvotes: 2

Gerald

Reputation: 986

This will work:

.font {
    font-size: 16px;
    vertical-align: top;
}

By default baselines are vertically aligned. If the <div> is empty, its bottom line will be its baseline. Otherwise the baseline of the first line of text is the baseline to be aligned with.

This problem exists even when there are words in both <div>s but having different font-sizes.

Upvotes: 1