bbuddyOmma bbuddyOmma - 5 months ago 10
CSS Question

display inline-block with 50% doesn't line up?

i just want to create a simple horizontal list with some

divs
. Therefor i did this:

Demo

Now as you can see in the result the divs are not next to each other. But i used width of 50%. So what is wrong?

Answer

Elements with inline-block have a little margin on the right side. You can see this with this Code:

div {
  background:black;
  display:inline-block;
  width:20%;
}
<div>Test #1</div>
<div>Test #2</div>

To solve your problem, you can use the following:

body, html {
  padding:0;
  margin:0;
}
.list{
  width:100%;
  height: 100%;
  background: black;
}
.list div{
  float:left;
  display: block;
  width: 50%;
  height: 100px;
  background: red
}
<div class="list">
  <div style="background: red">1</div>
  <div style="background: orange">2</div>
  <div style="background: yellow">3</div>
  <div style="background: lightyellow">4</div>
</div>

Comments