floatitis pt6

explaining the need

While css differs from html in the sense that it is not supposed to be descriptive but purely presentational, there's still meaning attached to css properties. In this meaning often lies the answer to many problems we experience when writing css. Floating was never intended to support column or page design, but it ended up as one of the prime cornerstones for the table-div switch. So much that the float became overused. The first article in this series does a little more explaining on how this happened

the float alternatives

Making a css design without using floats is near impossible, the point of this series was never to completely abolish the use of floats from css design. On the other hand, floats are sometimes abused where they shouldn't be, often leading to cross-browser issues and lots of hair scratching. What follows is a quick checklist of the alternatives described.

• Using text-align: a very simple method using the css text-align property on a parent element. Works well with small snippets of separated content.
• The margin/float combo: rather than floating two elements, the second element in source can be given a margin in the float direction as large as the width of the floated element. Works in situations where the floated element is small, comes first in source and has a controlled width.
• The pos:abs method: similar to the margin/float combo, but instead of applying a margin, we position an element absolutely. Source order is of no importance, but this time around the width of the absolutely positioned element should be controlled.
• Inline-block: a css display property which sets elements inline without losing its block capabilities (paddings/margins). Extremely handy when working with lists, but browser support is somewhat shaky.

These are the ones I know about and use from time to time. None of these techniques is perfect, but together they can seriously reduce the abuse of floats when setting up a css design.

css3 potential

The creators of css3 heard the pleas for better layout control (which was not really hard, with all these techniques flying around) and came up with two separate solutions.

First up is the multi-column module, which mimics newspaper behavior in the sense that the content of a single element can be split over multiple columns. More information and reading material can be found on the W3 site.

Better yet (though severely more complex) is the css3 grid layout module, which allows the designer to build a complete grid in css. The stuff dreams are made of (at least for us css folk), but it'll be quite a while before this kind of css engineering will have found its way to our daily work pattern.

conclusion

Guess that was all for me. If there are things I missed (techniques or future developments) I'll be glad to know about them. Apart from that, this series might not be quite revolutionary, it was still an interesting exercise in listing techniques that mimic float behavior. Hope you enjoyed it as much as I did.