CSS block elements on a line

Question

What's the most common way to deal with a series of block elements that need to be on a line (if javascript needs to be able to modify their widths, for example)? What are the pros and cons to applying float:left to each of them vs. using positioning to place them?

Answer 1

Well, if you're not too concerned with older browsers (I'm looking at you, IE6) the best way here is to go with

display:inline-block;

Basically, it creates a box-model element without clearing before or after it, so it remains in the line. Every modern browser interprets it well.

Answer 2

Floating would be my choice, but it really depends on what you wish to achieve. If you can provide a more specific example I would be able to give you a clear reason as to what and why I think you should use. However here is a brief set of pros and cons that I have come accross (I'm assuming that by positioning you mean absolute positioning):

Positioning pros:

• very precise positioning in relation to the next ancestor marked as position relative - allows for great flexibility
• allows for elements to be in a different order visually than they are in the DOM

Positioning cons:

• Harder to line up with other elements since the positioned element is no longer in the document flow and also because of the level of precision required.
• Other elements ignore the absolutely positioned element which means you could have a potential overlap, unless you account for the minimum and maximum size of the positioned element
• harder to implement a footer if you are using absolute positioning for your columns.

Float pros:

• really easy to construct simple and advanced layouts
• no footer problem
• no worrying about precision, browser takes care of that for you
• parent container stretches

Float cons:

• Lots of pitfalls for those less experienced with float layouts that may lead to many questions being asked on SO :)

As to the clear:both element that Sebastian mentioned, There's a simple way around that. Lets say you have a container div and 2 floated divs inside.

Html:

<div id="con">
    <div class="float"></div>
    <div class="float"></div>
</div>

CSS:

#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }

if you were to run this code you would notice that the container div (the magenta coloured one) is only a single pixel high whereas the floated divs were correct - which is the problem Sebastian mentioned. Now you could take his advice and add a br or float the container which would not be very semantic - so here is a slightly more elegant solution. Just add overflow:hidden; to the container div like so:

#con { background:#f0f; overflow:hidden; }

Now your container should wrap the floated divs properly.