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

The parent container does not stretch with them unless it is also assigned a float tag or there is a br with clear:both; at the bottom.

I would go with the float:left instead of the positioning. The browser does all the aligning when one object stretches. So there is less for you to care about.

Answer 2

I think i wouldn't explicitly position the elements but rather instruct the browser to use an inline layout for the elements using display:inline and let the browser handle the positioning.

regarding float vs positioning i think the only way to line them up using positioning is by using absolute positioning, and that means you need to handle re-sizes(of the browser view port) in order to keep the elements in place.

I think that by using the float property the browser handles the re-sizing issues for you and re-renders the element in the correct place.

Answer 3

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.

Answer 4

Only disadvantage to float in situations like this for me has been that you'll either need to left justify them or right justify them -- centering is not an option. However you've mentioned you're using absolute values for widths, so you could just nest all the floated elements in a DIV element and add either margin-right or margin-left to the parent DIV to simulate center alignment.

Answer 5

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.