0

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?

4

3 Answers 3

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>

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.