Inline-blocks inside fixed width content overflowing

Question

I have two inline-blocks of fixed content, I'm trying to display these next to each other.

They're both held within a div of width: 1000px;, the two inline-block divs are both width: 400px; and width: 600px; respectively.

The two divs however don't display inline, the second div collapses underneath the first, if I drop the width of the second to width: 550px; they both display inline, my question being:

How come two divisions that have a combined width of 1000px can't both fit inside a container that has a width of 1000px;?

Fiddle below.

<div class="layout">
  <div class="width">
    <div class="area left">

    </div>
    <div class="area right">

    </div>
  </div>
</div>

And the CSS

.layout {
  box-sizing: border-box;
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 50px;
}

.layout .area.left, .layout .area.right {
  display: inline-block;
  height: 250px;
}

.layout .area.left {
  width: 400px;
  background: green;
}

.layout .area.right {
  width: 600px;
  background: blue;
}

.width {
  width: 1000px;
  margin: 0 auto;
}

https://jsfiddle.net/4asw47yg/

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) — Stickers, Apr 29 '15 at 17:37
and updated fiddle with the fix - https://jsfiddle.net/4asw47yg/1/ is that it? — Stickers, Apr 29 '15 at 17:38

Nick Craver · Answer 1 · 2015-05-01T00:31:22.643

It's because the browser is accounting for the space between the two .area <div> elements. If you simply remove the space (and make no other changes), it will work - like this:

<div class="layout">
  <div class="width">
    <div class="area left">

    </div><div class="area right">

    </div>
  </div>
</div>

Here's an updated fiddle showing the results.

To be clear: the reason you're seeing this is the display: inline-block. Compare, and you'll notice the vertical space difference between with it (gap) and without it (no gap). I was going to try and explain this further, but it looks like there's an excellent write-up already here.

I understand why it's occurring, but ugh - that just makes my html ugly ^^. Cheers anyway dude, I'll get this done. — Jack hardcastle, May 01 '15 at 09:08

chrisbedoya · Answer 2 · 2015-04-29T18:51:29.730

1

You can either remove the display: inline-block and float the elements, or add a margin of -4px to the DIVs. If you have access to the HTML you can remove the white space around the two DIVs and it will display properly.

<div class="layout">
  <div class="width">
    <div class="area left"></div><div class="area right"></div>
  </div>
</div>

Read this article to learn more about it: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

edited Apr 29 '15 at 18:51

answered Apr 29 '15 at 17:41

chrisbedoya

820
7
22

A good idea for keeping the line breaks in the source code but still having no spaces is using line break HTML comments: `
`, etc. – Sebastian Simon Apr 29 '15 at 18:02
An other alternative is to set font-size of parent to 0, forcing to set it back to a readable value for child divs. Chris Coyier addresses this specific issue in [this article](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) – Laurent S. Apr 30 '15 at 22:23

Inline-blocks inside fixed width content overflowing

2 Answers2