Two inline-block elements, each 50% wide, do not fit side by side in a single row

Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.

When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).

So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:

body{
  margin: 0; /* removing the default body margin */
}

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

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>

There is a few ways to fix that:

1. No space between those elements

body{
  margin: 0; /* removing the default body margin */
}

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

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>

2. Using HTML comments

body{
  margin: 0; /* removing the default body margin */
}

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

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div><!--
--><div class="right">bar</div>

3. Set the parents font-size to 0, and then adding some value to inline-block elements

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

4. Using a negative margin between them (not preferable)

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>

5. Dropping closing angle

body{
  margin: 0; /* removing the default body margin */
}

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

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

6. Skipping certain HTML closing tags (thanks @thirtydot for the reference)

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

References:

  1. Fighting the Space Between Inline Block Elements on CSS Tricks
  2. Remove Whitespace Between Inline-Block Elements by David Walsh
  3. How to remove the space between inline-block elements?

As @MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the html tag (like in HTML5Boilerplate). Example:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

good answer in css3 is:

white-space: nowrap;

in parent node, and :

white-space: normal;
vertical-align: top;

in div (or other) at 50%

exemple : http://jsfiddle.net/YpTMh/19/

EDIT:

there is another way with :

font-size: 0;

for parent node and override it in child node


It's because the whitespace between your two divs is being interpreted as a space. If you put your <div> tags in line as shown below the problem is corrected:

<div id="left"></div><div id="right"></div>

Tags:

Html

Css

Recent Posts