95
<!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?

9 Answers 9

156

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;
}

6
  • 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). Commented Apr 8, 2016 at 8: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, table/table-row/table-cell or use float.
    – Vucko
    Commented Apr 8, 2016 at 8:19
  • 2
    I use inline-blocks perfectly. My normal approach is parent { font-size:0; } child {font-size: 1rem; }. With rems now is easiest Commented Apr 8, 2016 at 8: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
    Commented Aug 8, 2017 at 7:56
  • Also make sure border is off. This can add space if you're floating the divs.
    – evolross
    Commented Oct 24, 2017 at 22:20
28

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/

0
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>
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>
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.

0
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>

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;

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

0

add float: left; to both div tags.

div {
  float: left;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.