Two DIVs of half-width getting to long for the container

Question

I used the CSS:

div.half {
  width: 50%;
  display: inline-block;
}

And the HTML:

<div>
  <div class="half">...</div>
  <div class="half">...</div>
</div>

Of course, as expected, the DIV's got too wide, due to the borders and paddings. So I added box-sizing, which helped me before and got this CSS:

div.half {
  box-sizing: border-box;
  width: 50%;
  display: inline-block;
}

However, this time, I get a line break there. And that's a surprise. What do I miss?

First, when you use `display:inline-block` there will be _whitespace_ between those elements so you'll have to remove it - [see this question](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements). Second, use _browser prefixes_ for `box-sizing: border-box;` due its [lack of support](http://caniuse.com/css3-boxsizing). — Vucko, Jun 06 '14 at 00:06
While it should be +1 for the issue of support, I can't help noticing that all the browsers listed in current version are fine with it. Of course, we have users with older browsers but still... — Konrad Viltersten, Jun 06 '14 at 00:18
It depends what browsers are you targeting. For example, previous version of firefox needs the _prefix_, so it isn't bad to add those two extra lines of CSS :) — Vucko, Jun 06 '14 at 00:21

score 3 · Accepted Answer · answered Jun 06 '14 at 00:04

3

There's a space between the two inline-block boxes. It's from the line break.

In this example, I've moved the two <div>s to be in the same line, with no space in between.

<div>
  <div class="half">...</div><div class="half">...</div>
</div>

answered Jun 06 '14 at 00:04

guest

Pfff... Second time today. I'm on fire... (+1 for explanation) – Konrad Viltersten Jun 06 '14 at 00:16

1 Answers1