css :: simple hbox

A hbox is a horizontal box. That means a box where all sub-elements display horizontally across the page, and never wrap.

If you can disregard IE6 (and perhaps IE7… at least IETester doesn’t like it), then a hbox can be as simple as:

  .hbox {
  .hbox > * { display:table-cell; }

Then the markup:

  <div class="hbox">

Adding some debugging markup to show what’s going on:

  .hbox { border:3px solid green; border-spacing:3px; }
  .hbox > div { border:1px solid blue; padding:5px; }

and you get:

hbox example output

You can use other table-css on the .hbox selector as well, e.g. border-collapse.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *