CSS Display:inline-block 3 columns No floats

I am trying to get a 3 column design, with out using any floats.

HTML

<header>This is a Header</header>
<div id="body">
  <div id="col-1" class="col">this is a column - this is a column - this is a column - this is a column</div>
  <div id="col-2" class="col">this is a column - this is a column - this is a column - this is a column</div>
  <div id="col-3" class="col">this is a column - this is a column - this is a column - this is a column</div>
</div>

CSS

* {
  margin:0;
  padding:0;
}
header {
  background:#4679BD;
  width:90%;
  height:70px;
  line-height:70px;
  font-size:20px;
  text-align:center;
  border:1px solid #333;
  margin:10px auto;
}
#body {
  width:700px;
  margin:auto;
  border:1px solid #333;
}
#body .col {
  display:inline-block;
  background:#ccc;
  height:500px;
  border:1px solid #333;
  margin:5px;
}
#body #col-1 {
  width:100px;
}
#body #col-2 {
  width:200px;
}
#body #col-3 {
  width:350px;
}

http://jsfiddle.net/chaos67731/fmZpr/5/

When I give the columns a width on the class “.col” the all stay to the top, but when I give each column a width by the ID and make them different, they step does as you will see in the link above.

What is a fix for this and why does it happen?


solution

By default, inline-block element’s vertical alignment is baseline.

Simply set vertical-align:top on the .col.

#body .col {
  vertical-align: top;
}

Working jsFiddle here