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

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?

Answer 1

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>

Answer 2

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

Answer 3

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 */