Why do two divs totaling 100% push to the next line?

Question

I am using Firefox and when I place two div elements side by side with a width totaling 100%, the right div is pushed to the next line. When they total 99%, everything works as intended.

Here is an example:

CSS

.body {
    height: 100%;
    width: 100%;
}

.left {
    background-color: red;
    width: 70%;
    height: 100%;
    display: inline-block;
}

.right {
    background-color: yellow;
    display:inline-block;
    width: 30%;
    height: 100%;
}
}

HTML

<body>
    <div class="wrapper">
        <div class="left">
            d
        </div>
        <div class="right">
            d
        </div>
    </div>
</body>

Just Read this http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — DaniP, Jan 21 '14 at 13:56
See this: http://jsfiddle.net/abhitalks/VTUt2/1/ for a hint. — Abhitalks, Jan 21 '14 at 13:56
@JoshPowell That's not a reason for voting negative, he tried, he contributed the code, if you want, you can close this as a duplicate — Mr. Alien, Jan 21 '14 at 14:17
@Mr.Alien I see I see! I was under a different impression, linking to one now. — Josh Powell, Jan 21 '14 at 14:19
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Josh Powell, Jan 21 '14 at 14:21
@JoshPowell Yea, you can cast a close vote but shouldn't downvote, as if users know why this happens, he will certainly search for it rather than asking the question here :) — Mr. Alien, Jan 21 '14 at 14:22
@Mr.Alien You have a very good point and I also removed my downvote, thanks for guiding me along the right path. :p — Josh Powell, Jan 21 '14 at 14:23

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

Because there's whitespace between them, as inline-ish elements. If you want to resolve this issue, numerous methods would work:

<div class="left">
    <!-- content -->
</div><div class="right">
    <!-- content -->
</div>

By placing our closing and opening tags side-by-side, we remove line-returns, spaces, and more. Unfortunately, it's a bit ugly and doesn't lend itself to being quickly discernible by perusing eyes.

Another approach is to remove the unintended white-space with HTML comments:

<div class="left">
    d
</div><!--
--><div class="right">
    d
</div>

Like the first option, this too leaves the code slightly messy, and means that each set of contiguous columns must be separated by an odd and out of place HTML comment.

Both of the two aforementioned approaches should give you some maintainability concerns. If you were to come into a project and noticed markup like this, you may try to improve the formatting, remove seemingly pointless comments, and overall try to improve code-readability.

It's better to take an approach that doesn't require odd markup:

<style>
    .wrapper { 
        overflow: auto; }
    .column  { 
        float: left; 
        display: block; }
    .left    { 
        width: 70%; }
    .right   { 
        width: 30%; }
</style>
<div class="wrapper">
    <div class="left column">
        d
    </div>
    <div class="right column">
        d
    </div>
</div>

The above uses floated block elements. Block elements don't permit whitespace to either side, thus removing our pesky issue. Floated elements however do implicitly mess up the layout of their parent container. To ensure these remain within their parent container, we set the parent's overflow property.

This markup is already in your solution, and doesn't include any conventions or approaches that could be mistaken at a later time.

Understanding the Box Model

One last caveat to the approaches above; you should make sure that the overall width of your elements is not affected by padding, and borders. In modern browsers, this isn't often an issue, but for legacy support it's wise to set the box-sizing property on these elements:

.wrapper, .column {
    box-sizing: border-box;
}

Documentation: http://docs.webplatform.org/wiki/css/properties/box-sizing

Flexbox

One final solution is to avoid floats, inline-blocks, and everything that comes with them entirely. Modern browsers support Flexbox, which is built specifically for this time of problem.

Using your current markup, the following CSS will give you two columns:

.wrapper {
  display: flex;
}

.column {
  flex: 1;
}

.left {
  flex-basis: 70%;
  background: red;
}

.right {
  background: blue;
}

This syntax will need some adjustments for earlier versions of Chrome which supported prefixed properties, and Internet Explorer 10 which supported a draft implementation of the standard.

You can see a demo here: http://codepen.io/anon/pen/skIeg

Well, I voted long way back but just I would like you to add the browser reset as well, cuz even if OP uses `float` which will get rid of this issue, browser will add default `margin` `padding` which may also cause the element to shift down — Mr. Alien, Jan 21 '14 at 14:33
@Mr.Alien I added a new section addressing the box-model, and how to ensure you're relevant elements have their dimensions determined by the border-box rather than the content-box. — Sampson, Jan 21 '14 at 14:37

Abhitalks · Answer 2 · 2014-01-21T14:11:54.090

4

The white space counts on inline-block elements.

You can comment that out. See here for hint: http://jsfiddle.net/abhitalks/VTUt2/1/

    <div class="left">
        d
    </div><!--
    --><div class="right">
        d
    </div>

edited Jan 21 '14 at 14:11

answered Jan 21 '14 at 13:58

Abhitalks

25,725
4
53
74

score 1 · Answer 3 · answered Jan 21 '14 at 14:02

You can check below link..

Fiddle here

.wrapper{width:100%;}
.left {
   background-color: red;
   width: 70%;
   height: 100%;
   display: inline-block; float:left;
   }

.right {
   background-color: yellow;
   display:inline-block;
   width: 30%;
   height: 100%;
}

score 1 · Answer 4 · answered Jan 21 '14 at 14:05

Here is your's solution, there was a white space which was creating problem,, here is the code....

   <html>
  <body>
     <div class="wrapper">
         <div class="left">
            d</div><div class="right">
            d
         </div>
    </div>
</body>
 </html>

Why do two divs totaling 100% push to the next line?

4 Answers4

Flexbox