Div breaks into new row even though width isn't 100%

Question

So i have a problem.

I have 2 divs , they should be one next to another.

They are both wrapped with div that has some max-width : n .

I put width: 70% to first div and width: 30% to second div. I expect them to fill 100% of the parent div. Instead second div breaks to new line.

Here's a jsfiddle example.

https://jsfiddle.net/u5aqhvmj/

EDIT: Please people, I'm trying to solve this problem. I know I can use floats but that isn't part of this discussion.

Ok thank you , I'll go check it out! I just removed all the whitespace between html tags and it works. Why does this happens? Isn't this some kind of bug? Or is there some good reason behind this behavior ? — Paran0a, Oct 09 '15 at 08:34
@Paran0a This is expected behaviour. `inline-block` gives you the best of both `block` (the ability to set `width`) and `inline` (the ability to flow with `inline` elements). The browser is treating the whitespace in a similar way it would between standard `inline` elements. — Hidden Hobbes, Oct 09 '15 at 08:52
Thank you , I'm satisfied with that answer ! The question is a duplicate of the one you linked. — Paran0a, Oct 09 '15 at 08:54

David Schmoecker · Answer 1 · 2015-10-09T09:05:59.793

1

Try setting float:left on both divs

Update:

In your html you have whitespace characters taking up space! So you have 30% + 70% + space taken up by whitespace characters -> >100% which causes the linebreak

If you write all divs in a single line without space in your fiddle

<div class="firstQ"></div><div class="secondQ"></div>

there won't be a line break

edited Oct 09 '15 at 09:05

answered Oct 09 '15 at 08:39

David Schmoecker

567
3
8
17

1

Floating elements removes them from the flow and has side effects on the following elements that have to mitigated. It is a really hacky way to solve a very simple problem. – Will Jenkins Oct 09 '15 at 09:17

score 0 · Answer 2 · answered Oct 09 '15 at 09:48

Without inline-block 4px reset hack, you can do this with flexbox:

.outer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 400px;   
}

.first,
.second {
  height: 100px;
}

.first {
  background: red;
  -webkit-flex: 1 1 70%;
  -ms-flex: 1 1 70%;
  flex: 1 1 70%;
}
.second {
  background: blue;
  -webkit-flex: 1 1 30%;
  -ms-flex: 1 1 30%;
  flex: 1 1 30%;
}

<div class="outer">
    <div class="first">
    </div>
    <div class="second">
    </div>
</div>

Div breaks into new row even though width isn't 100%

2 Answers2