CSS divs alignment inside div with 100% width

Question

I searched for the answer on my question, but weirdly didn't find it. I need to align 4 divs inside main div. The main div should be 100% in width and every inner div should be 25% of the main div to achieve 4 div of the same width in one row. My code is:

html {
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
}
.container {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
}
.inner-div {
  display: inline-block;
  width: 25%;
}
.yellow {
  background-color: yellow;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}

<div class="container">
  <div class="inner-div yellow">
    yellow
  </div>
  <div class="inner-div blue">
    blue
  </div>
  <div class="inner-div red">
    red
  </div>
  <div class="inner-div green">
    green
  </div>
</div>

For some reason the last div doesn't fit in in the same row as the others. I can't understand why this is happening! Please help.

You can try CSS flexbox, which will force *all* child divs (as many as you want to include) onto a single row: http://stackoverflow.com/a/32122011/3597276 — Michael Benjamin, Nov 02 '16 at 19:28
It's the literally famous inline(-block) whitespace issue - https://css-tricks.com/fighting-the-space-between-inline-block-elements/ covers the topic extensively. To lazy to search for a duplicate right now, but there should be more than enough. — CBroe, Nov 02 '16 at 19:46

score 7 · Accepted Answer · answered Nov 02 '16 at 19:24

Inline elements are sensitive to white space in your code. Just remove it.

html{
  margin:0;
  padding:0;
  width:100%;
}
body{
  margin:0;
  padding:0;
  width:100%;
}
.container{
  margin:0;
  padding:0;
  width:100%;
  display:block;
}
.inner-div{
  display:inline-block;
  width:25%;
}
.yellow{
  background-color:yellow;
}
.blue{
  background-color:blue;
}
.red{
  background-color:red;
}
.green{
  background-color:green;
}

<div class="container">
  <div class="inner-div yellow">
    yellow
  </div><div class="inner-div blue">
  blue
  </div><div class="inner-div red">
  red
  </div><div class="inner-div green">
  green
  </div>
</div>

Thank you! I have been looking for that answer for a long time! — levkaster, Nov 02 '16 at 19:27

Pat · Answer 2 · 2016-11-02T19:35:24.960

If you don't want to worry about removing white-space in your code you can set font-size: 0; on .container and set font-size: initial; on .inner-div

html{
      margin:0;
      padding:0;
      width:100%;
     }
     body{
      margin:0;
      padding:0;
      width:100%;
     }
     .container{
      margin:0;
      padding:0;
      width:100%;
      display:block;
            font-size: 0;
     }
     .inner-div{
          font-size: initial;
      display:inline-block;
      width:25%;
     }
     .yellow{
      background-color:yellow;
     }
     .blue{
      background-color:blue;
     }
     .red{
      background-color:red;
     }
     .green{
      background-color:green;
     }

<div class="container">
  <div class="inner-div yellow">
    yellow
  </div>
  <div class="inner-div blue">
    blue
  </div>
  <div class="inner-div red">
    red
  </div>
  <div class="inner-div green">
    green
  </div>
</div>

Wim Mertens · Answer 3 · 2016-11-02T19:31:25.477

1

This is because display: inline-block adds white-space. One way to avoid this is by rewriting it like this:

<div class="inner-div yellow">
  yellow
</div><!--
--><div class="inner-div blue">
  blue
</div><!--

etc.

edited Nov 02 '16 at 19:31

answered Nov 02 '16 at 19:24

Wim Mertens

1,780
3
20
31

The divs aren't adding any white space. The space exists in the code between the divs. – j08691 Nov 02 '16 at 19:25

score 1 · Answer 4 · answered Nov 02 '16 at 19:34

1

Change this

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
   }

to:

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
}

answered Nov 02 '16 at 19:34

cronoik

15,434
3
40
78

score 0 · Answer 5 · answered Nov 02 '16 at 19:28

<html>
    <style>
     html{
      margin:0;
      padding:0;
      width:100%;
     }
     body{
      margin:0;
      padding:0;
      width:100%;
     }
     .container{
      margin:0;
      padding:0;
      width:100%;
      display:block;
     }
     .inner-div{
      display:inline-block;
      width:25%;
     }
     .yellow{
      background-color:yellow;
   float: left;
     }
     .blue{
      background-color:blue;
   float: left;
     }
     .red{
      background-color:red;
   float: left;
     }
     .green{
      background-color:green;
   float: left;
     }
    </style>
    <body>
     <div class="container">
      <div class="inner-div yellow">
      yellow
      </div>
      <div class="inner-div blue">
      blue
      </div>
      <div class="inner-div red">
      red
      </div>
      <div class="inner-div green">
      green
      </div>
        </div>
    </body>
    </html>

score 0 · Answer 6 · answered Nov 02 '16 at 19:29

0

Change this...

.inner-div{
  display:inline-block;
  width:25%;
}

To this...

.inner-div{
  float: left;
  display:block;
  width:25%;
}

answered Nov 02 '16 at 19:29

Dustin Schwartz

26
2

Maximo · Answer 7 · 2016-11-02T19:49:00.787

Because inline elements are rendered as inline, browsers interpret the whitespaces between the inner divs as margin. So, either your html markup follows a pattern as follows

<div class="container">
   <div class="inner-div yellow">
        yellow
   </div><div class="inner-div blue">
        blue
   </div><div class="inner-div red">
        red
   </div><div class="inner-div green">
        green
   </div>
</div>

or better still, you apply a negative margin to them in your css:

.inner-div {
  display: inline-block;
  width: 25%;
  margin-right:-5px;
}

score -2 · Answer 8 · answered Nov 02 '16 at 19:26

-2

make sure there is no padding, margins or borders any of the divs, this will throw off the width.

answered Nov 02 '16 at 19:26

joshpj1

186
1
1
9

CSS divs alignment inside div with 100% width

8 Answers8