StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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):</p> <p>Positioning pros:</p> <ul> <li>very precise positioning in relation to the next ancestor marked as position relative - allows for great flexibility</li> <li>allows for elements to be in a different order visually than they are in the DOM</li> </ul> <p>Positioning cons:</p> <ul> <li>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. </li> <li>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</li> <li>harder to implement a footer if you are using absolute positioning for your columns.</li> </ul> <p>Float pros:</p> <ul> <li>really easy to construct simple and advanced layouts</li> <li>no footer problem</li> <li>no worrying about precision, browser takes care of that for you</li> <li>parent container stretches</li> </ul> <p>Float cons:</p> <ul> <li>Lots of pitfalls for those less experienced with float layouts that may lead to many questions being asked on SO :)</li> </ul> <p>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.</p> <p>Html:</p> <pre><code><div id="con"> <div class="float"></div> <div class="float"></div> </div> </code></pre> <p>CSS:</p> <pre><code>#con { background:#f0f; } .float { float:left; width:100px; height:100px; background:#0ff; } </code></pre> <p>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:</p> <pre><code>#con { background:#f0f; overflow:hidden; } </code></pre> <p>Now your container should wrap the floated divs properly.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload