CSS block elements on a line

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?

Solution

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.