Like the majority of people I talk to, my first jump from coding in tables to CSS had a lot of help from absolute positioning. Needless to say, it was a poor excuse for a CSS site. The more I learned, I found myself on the all-floats bandwagon, declaring absolute positioning was for chumps.
A few years passed without so much as a breath of positioning of any kind. Then a strange thing happened, thanks to some smart friends, it started to make sense. Floats and absolute position can live in harmony together. Moderation is key. In the right situation, absolute positioning can provide a more semantic solution with fewer lines of code. Now, I rarely code a site without a combination of floats and positioning.
Here are the basic guidelines I use when deciding between floats and absolute positioning.
When to use floats:
- Any editable content. Think about this in terms of body or sidebar content that might expand or contract over time.
- Any time the block level properties are important to the structure of the document. Using absolute positioning forfeits that element’s block level status, making it an extraneous element relative to it’s relatively positioned parent.
If I can’t save code, I float.
When to use absolute positioning:
- Any static content that lives outside the structure of the document. The best example of this would be navigation located in the top center or top right of the page.
- Any elements I want to exist outside the document flow. Absolutely positioning an element gives it autonomy from the surrounding elements.
- When it makes sense. Don’t force it. Floating will work great for the majority of these situations. If I can’t save code, I float.
That’s my quick and dirty guide to absolute positioning and floats. If you’re interested in a deeper discussion and explanation, James Mathias has written some great articles on floats and positioning.
Do you have any guidelines for absolute positioning versus floating elements?Share Article