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:
[sourcecode language=”css”]
.hbox {
overflow-x:auto;
}
.hbox > * { display:table-cell; }
[/sourcecode]
Then the markup:
[sourcecode language=”html”]
<div class="hbox">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
[/sourcecode]
Adding some debugging markup to show what’s going on:
[sourcecode language=”css”]
.hbox { border:3px solid green; border-spacing:3px; }
.hbox > div { border:1px solid blue; padding:5px; }
[/sourcecode]
and you get:
You can use other table-css on the .hbox selector as well, e.g. border-collapse.