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 {
    overflow-x:auto;
  }
  .hbox > * { display:table-cell; }

Then the markup:

  <div class="hbox">
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>

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 *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>