levkaster levkaster - 1 month ago 7
CSS Question

CSS divs alignment inside div with 100% width

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.

Answer

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>

Comments