CSS block elements on line

Question

What is the most common way to deal with a series of block elements that should be on the line (for example, if javascript should be able to change their width)? What are the pros and cons of using float: left for each of them against using positioning to place them?

Answer 1

Floating would be my choice, but it really depends on what you want to achieve. If you can provide a more concrete example, I could 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 came across (I assume that by positioning you mean absolute positioning):

Positioning pros:

• very precise positioning relative to the next ancestor, labeled as relative position - provides greater flexibility.
• allows elements to be in a different order visually than in the DOM

Positioning Cons:

• It is more difficult to align other elements, since the positioned element is no longer in the document flow, and also because of the required level of accuracy.
• Other elements ignore an absolutely positioned element, which means that you may have potential overlap if you do not take into account the minimum and maximum size of the positioned element
• it’s harder to implement a footer if you use absolute positioning for your columns.

Floating pros:

• really easy to create simple and advanced layouts
• no footer problems
• without worrying about accuracy, the browser takes care of it
• stretching parent containers

Float:

• Lots of pitfalls for those less experienced with floating point mockups that can lead to lots of questions asked on SO :)

As for the clear: both elements mentioned by Sebastian, there is a simple way. Let's say you have a container div and 2 floating 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 div container (magenta color) is only one pixel maximum, while the floating divs were correct - this is the problem mentioned by Sebastian. Now you can take his advice and add br or swim into a container that would not be very semantic - and here is a slightly more elegant solution. Just add overflow: hidden; into the div container like this:

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

Your container should now wrap the floating divs correctly.

Answer 2

Well, if you are not too concerned about old browsers (I'm looking at you, IE6), it is best to go with

 display:inline-block; 

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

Answer 3

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

I would go with a float: on the left instead of positioning. The browser performs alignment when one object is stretched. So you have nothing to worry about.

Answer 4

I think that I would not explicitly position the elements, but rather instructed the browser to use the built-in layout for elements using display: inline and allow the browser to handle positioning.

relative to float vs positioning. I believe that the only way to build them using positioning is to use absolute positioning, which means that you need to handle resizing (browser viewing port) to keep the elements in place.

I think that using the float property, the browser handles the recalibration problems for you and re-displays the element in the right place.

Answer 5

The only drawback to swimming in situations like this for me was that you either need to justify them or justify them - centering is not an option. However, you mentioned that you are using absolute values ​​for the width, so you can just nest all the moved elements in the DIV element and add a marginal or right left to the parent DIV to simulate centering.