94
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.

I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/ . But this is not an ideal solution because a small gap appears between the two divs.

Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/ . This works fine.

But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?

Lone Learner
  • 18,088
  • 20
  • 102
  • 200

9 Answers9

155

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;
}
jeremysprofile
  • 10,028
  • 4
  • 33
  • 53
Vucko
  • 20,555
  • 10
  • 56
  • 107
  • 3
    @hoosierEE that's not nosense. The space between elements is fine, it's because inline-block elements will positioning at the text line. If you put a space in a line, there will be a space. So the behaviour is the correct, even if you think that's an issue (as Vucko call it wrong). – Marcos Pérez Gude Apr 08 '16 at 08:08
  • 2
    I agree with @MarcosPérezGude, this behaviour is correct. As you can see from my post, there are a few ways to remove that whitespace (I myself use HTML comments to remove the white space). But if you mind that white space, you can always use [`flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), [`table/table-row/table-cell`](http://colintoh.com/blog/display-table-anti-hero) or use `float`. – Vucko Apr 08 '16 at 08:19
  • 2
    I use inline-blocks perfectly. My normal approach is `parent { font-size:0; } child {font-size: 1rem; }`. With rems now is easiest – Marcos Pérez Gude Apr 08 '16 at 08:41
  • it's a little annoying that tabs are still parsed as spaces. i've never seen that dropping the closing tag fix before, does that have any instability or side-effects? – MintWelsh Aug 08 '17 at 07:56
  • Also make sure `border` is off. This can add space if you're floating the divs. – evolross Oct 24 '17 at 22:20
  • @evolross check about [box-sizing: border-box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing). – Vucko Nov 02 '17 at 19:25
27

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

EDIT 2021 : personaly, I recommand use flexbox now : https://the-echoplex.net/flexyboxes/

Matrix
  • 3,458
  • 6
  • 40
  • 76
7

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>
Dan
  • 3,750
  • 5
  • 24
  • 38
4

Either make them block instead of inline-block. This will render divs ignoring spaces between them.

display:block;

or remove space between tags 

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

or add

margin: -1en;

to one of the divs in order to mitigate space taken by single space rendered.

vittore
  • 17,449
  • 6
  • 44
  • 82
4

Because there is a space between the elements. If you remove all whitespace, they will fit.

<div id="left">Left</div><div id="right">Right</div>
Michiel van Oosterhout
  • 22,839
  • 15
  • 90
  • 132
2

Please check below code:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}
<div id="left">Left</div>
<div id="right">Right</div>
Vaneet Thakur
  • 89
  • 7
1

It can be done by adding the css display:inline to the div that holds the inline elements.

While removing the white space using margin with a negative value it becomes necessary to add it to this particular element. As adding it to a class will affect places where this class has been used.

So it would be safer to use display:inline;

Vish
  • 169
  • 3
1

Flexbox example - this would be used for the parent class holding the two side by side elements.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Taken from Vertically centering a div inside another div

nbixler
  • 490
  • 1
  • 9
  • 24
0

add float: left; to both div tags.

div {
  float: left;
}
Tatenda
  • 21
  • 3