Why don't these four divs appear on the same line?

Question

I want four divs to appear on the same line. I can make three of them do it but the other won't unless I make the total width that the four divs take up less than 100%.

This shouldn't happen though, right? They should be able to, in total, take up 100% of the page width if there is nothing else 'in the way'? Below is a snippet with my code of what I mean.

* {
  margin: 0;
  padding: 0;
}
html,
body {
  overflow: hidden;
  font-size: 10px;
}
.wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0.5%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.inner {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.half {
  width: 12.5%;
}

<div class="wrapper">
  <div class="inner" style="background-color: red;">Div 1</div>
  <div class="inner" style="background-color: blue;">Div 2</div>
  <div class="inner" style="background-color: green;">Div 3</div>
  <div class="inner">
    <div class="inner half" style="background-color: purple;">Div 4 - First Half</div>
    <div class="inner half" style="background-color: Teal;">Div 4 - Second Half</div>
  </div>
</div>

I haven't checked to see if aligning the divs on the same line using float: left will make a difference to the problem as I need to use display: inline-block for aligning other thighs in the divs in my actual code.

So does any one know how to get the last one to appear on the same line?

It's because [inline elements respect the whitespace](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements/19038859#19038859) in the markup, which means that there is extra space being generated between the elements. Either remove the line breaks, or follow one of the other alternatives in the linked answer. — Josh Crozier, Dec 08 '15 at 18:45
Possible duplicate of [Why don't these 4 inline-block boxes fit neatly in their container?](http://stackoverflow.com/questions/32801095/why-dont-these-4-inline-block-boxes-fit-neatly-in-their-container) — Michael Benjamin, Dec 08 '15 at 18:52
@JoshCrozier Removing all the breaks doesn't seam to have worked. — Kian Cross, Dec 08 '15 at 18:52
@crossboy007 .. It worked here - http://jsfiddle.net/4dnp3nha/ — Josh Crozier, Dec 08 '15 at 18:53

score 1 · Answer 1 · answered Dec 08 '15 at 18:49

1

Your CSS doenst contain a class thats called "inner half" so you are combining two. You have multiple width's. Your first calls is inner so it takes 25% + 12.55

answered Dec 08 '15 at 18:49

Adam Sitemap

139
8

Doesn't the second override the first? – Kian Cross Dec 08 '15 at 18:49
Thanks Adam, my bad, will fix that up now :) – Kian Cross Dec 08 '15 at 18:55

score 1 · Accepted Answer · answered Dec 08 '15 at 18:53

Because you need to add float: left; to inner to make it behave as expected.

Also Adam is right, 12.5% will be 12.5% of the already 25% width container. I've removed the inner class from the half divs and changed their width to 50%.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
  font-size: 10px;
}

.wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0.5%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}

.inner {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  float:left;
}

.half {
  float:left;
  width: 50%;
}

 <div class="wrapper">
  <div class="inner" style="background-color: red;">Div 1</div>
  <div class="inner" style="background-color: blue;">Div 2</div>
  <div class="inner" style="background-color: green;">Div 3</div>
  <div class="inner">
    <div class="half" style="background-color: purple;">Div 4 - First Half</div>
    <div class="half" style="background-color: Teal;">Div 4 - Second Half</div>
    <div style="clear:both;"></div>
  </div>
</div>

Program-Me-Rev · Answer 3 · 2015-12-08T19:33:52.803

Try clearfix. Just apply a class="clearfix" to the parent element. This is the easier and the more modern way around this, as compared to floats. The bigger advantage is that you can re-use it all over your HTML DOM much more easily than the approach you're taking.

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Why don't these four divs appear on the same line?

3 Answers3