CSS block elements on a line

html css web-standards
Dan Monego picture Dan Monego · Nov 21, 2008 · Viewed 29.1k times · Source

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

Gabe picture Gabe · Nov 21, 2008

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.

Related questions

Why <big> is not in HTML 5 Tag list while <small> is?

Shouldn't both be removed? Or does it mean we should use <small>? Why is <big> removed but <small> is not? What is the problem with <big> which does not apply to <…

Read More
Can I use non existing CSS classes?

I have a table where I show/hide a full column by jQuery via a CSS class that doesn't exist: <table> <thead> <tr> <th></th> <th class="target">&…

Read More
UI best practice question: Cancel button or Cancel link

I have a discussion with a colleague about what the "web standard" is for canceling in an form. In our discussion we have a "change password" page as example. We have a designed "send" button and "cancel" button. Both the …

Read More