CODEWITHSUNDEEP
css
Jack hardcastle
Jack hardcastle

Reputation: 2875

Inline-blocks inside fixed width content overflowing

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/

Upvotes: 1

Views: 424

Answers (2)

Nick Craver
Nick Craver

Reputation: 630469

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.

Upvotes: 3

chrisbedoya
chrisbedoya

Reputation: 810

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/

Upvotes: 1

Related Questions