Horizontal Layout Methods

HTML & CSS
1

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?

2

Hi,

I think sometimes people miss the point of CSS slightly in trying to look for a “one size fits all cure” when in reality the strength of CSS is that things can be accomplished in many different ways and all depend on the dynamics of the job in hand. This is of course why CSS can be hard to master for beginners because they need to understand how things work and interact with each other before they can apply the correct properties to use.

Your summary is pretty fair although I would disagree or comment on some points.

Tables:
Cons: Extremely hard to stop cells changing size to fit the content (that’s why the spacer gif was invented). Cells can’t wrap to a new line.

Display:Table
You don’t need the extra mark-up in most cases as the browser will construct it automatically. At the most you will need no more extra mark up than a normal table and at the least you would just need a table-cell. There was a long-standing gecko bug which needed display:table-row but that has been squashed now and indeed was only needed when the rules were in the head as the bug was not exhibited when the code was in an external stylesheet.

Extra cons are that you can’t do colspan or rowspan like a real table.


Inline-block.

Percentage width should not be an issue in modern browsers and the white space issue was solved long ago in this quiz.

I find inline-block very useful and for form type layouts are ideal (label and input alignment).

Extra cons are that you need to apply the inline-block fix for IE6 and 7 although its is easy to do.

Floats
Pros:Extremely flexible and versatile and have a useful negative margin behaviour on the opposite side to the way the element is floated.
Cons: Have to watch for snagging if floats are of unequal height and wrap.

That was just a quick run through of my thoughts off the top of my head:)

3

Interesting, I’ve been a real strong advocate for the Float method for the past few years. But I recently took a several month hiatus from web dev work, and now upon my return I’ve been tinkering with the idea of using inline-block layouts more. Though it’s always been a though in the back of my head for the past few years, but never started to really implement it until just last week.

I am really starting to like the inline-block method more for certain sections of a page, but not for all of it.

4

Percentage width should not be an issue in modern browsers and the white space issue was solved long ago in this quiz.

Remember you can mix and match solutions. you can inline a wrapper and float anchors or vice versa.

5

Yes previously the sticking point was always IE6 and 7 that didn’t understand inline-block on block elements but most people didn’t realise there was a fix.:slight_smile:

Another previous sticking point was that inline-block wasn’t supported in Firefox 2 (although the somewhat buggy -moz-inline-box was) but FF2 is pretty old now and can mostly be discounted or get a reduced experience.

For forms as I mention above inline-block is great and avoids all those float snagging issues.

6

Thanks for the replies guys. Thanks for the tip for fixing the white-space. I’d spent considerable time looking into this in the past but didn’t think about that little combination of display: table; + word-spacing: 0;

I virtually never find myself using floats these days, maybe cause I don’t care for anything < IE8. Inline-Blocks, absolute positioning and tables seem to get me by in just about every instance.

7

Is anyone actually using inline-block for layout? I tried years ago (probably back around 2006 or 2007) but was fuddled by the gap between columns as a result of browsers rending the spaces between inline elements. I recently looked at the issue again and saw that you can eliminate the gap between columns in CSS by setting the font-size to zero on the containing element and then resetting the font-size inside each column. That removes the gap on most browsers except Safari. There are one or two other methods to remove the gap. But Safari is still the sticking point as nothing works.

I’m just wondering if anyone is using it. I would really like to stop using floats for layout if at all possible. It would be nice to eliminate the gap on Safari.

8

I already mentioned in post#2 that we fixed that bug in our quiz ages ago. :slight_smile:

There is no benefit to using inline-block as a main page container except for using it as a method to contain children floats. It’s usefulness is for horizontal alignment which would include mimicking floated column layouts though.