inline-block

You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float, but now with inline-block it's even easier. inline-block elements are like inline elements but they can have a width and height. Let's look at examples of both approaches.

The Hard Way (using float)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="box">

I'm floating!

</div>
<div class="after-box">

I'm using clear so I don't float next to the above boxes.

</div>

The Easy Way (using inline-block)

You can achieve the same effect using the inline-block value of the display property.

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box2">

I'm an inline block!

</div>
<div class="box2">

I'm an inline block!

</div>
<div class="box2">

I'm an inline block!

</div>
<div class="box2">

I'm an inline block!

</div>
<div class="box2">

I'm an inline block!

</div>
<div class="box2">

I'm an inline block!

</div>
<div class="box2">

I'm an inline block!

</div>
<div class="box2">

I'm an inline block!

</div>
<div class="box2">

I'm an inline block!

</div>
<div class="box2">

I'm an inline block!

</div>
<div>

I don't have to use clear in this case. Nice!

</div>

You have to do extra work for IE6 and IE7 support of inline-block. Sometimes people talk about inline-block triggering something called hasLayout, though you only need to know about that to support old browsers. Follow the previous link about IE6 and IE7 support if you're curious to learn more. Otherwise, let's continue.

  • Creative Commons License
  • Ads by Bocoup