With the hope of possibly learning something, and maybe to serve as a handy reference, I’m trying to think of all the possible and at least semi-practical ways of laying out elements horizontally, or inline which is probably a better way to put it. Here’s my list so far, but I’m hoping others can come along and suggest other methods.
Tables
Pros: Easy to understand and implement. No undesirable spacing or wrapping. Easy control of vertical alignment. Works nicely with percentage widths. Quite robust in that column dimensions can change while maintaining the overall width of the table.
Cons: Relatively cumbersome markup, semantically inappropriate.
Table Emulation
Pros: All the pros of tables, except without the incorrect semantics.
Cons: Often have to recreate the table structure (using display attributes: table-cell, table-row, and table) to get predictable results, hence usually ends up being more cumbersome than just using tables, as you’ve got the same amount of mark-up, but now also a lot of extra CSS and complexity.
Inline Blocks
Pros: Simple, very light on mark-up. Light on CSS. Relatively good control over vertical alignment relative to other inline elements.
Cons: Percentage width’s hard to achieve and generally not practical. No way to get rid of white-space between elements, at least not without removing it in the markup. Besides leaving a gap between elements, this can also be problematic when using percentage width’s and so on.
Floats
Pros: No undesirable spacing, relatively precise control over layout.
Cons: Breaks out of the document flow which can cause a number of undesirable side effects.
Absolute Positioning
Pros: Precise control over layout, positioning and size.
Cons: Breaks the document flow which can cause undesirable side effects. Cumbersome to maintain and very sensitive to change. Usually requires javascript to achieve dynamic resizing and positioning of elements.
They’re all the one’s I can think of right now. I use inline blocks more than any other method mentioned for horizontal layouts, but the spacing issue can sometimes pose as a significant hurdle, sometimes making it unfeasible. It’s also not always as robust as tables. Tables are usually a good fallback, though I really despise all the extra markup required, but when I do go tables, I normally use table markup as opposed to table emulation in CSS.
I can’t wait until some of the new CSS3 layout modules become more mainstream. The tools we have at the moment are pretty crap, but I’ve already had long discussion about this fact in the past, so we won’t go into that.
Can anyone think of other horizontal layout techniques?