What is the biggest cons to use position: absolute & top/left over Float & margin+padding, If site is fixed width (970px), centered?

Question

What is the biggest disadvantage to use CSS positioning(From Dreamweaver AP Div) for everything instead Float for fixed width, centered website?

if I don't care for

• Mobile users
• Small screen users (smaller than 1024 px screen size)

But I care for

• Screen reader user
• All browser user (including IE6)

Answer 1

If you don't care about small resolution, it's just a question of flexibility : when you use absolute positionning, you break the flow. So, everything must be exactly sized.

For many elements or situations (make a perfect image title...), it's the best (and sometimes unique) choice. Most of time, 'relative' is better because it kept the flow (element stay in the flow) but you can modify positionning relatively to is positionned parent (don't forget to position parent, even if you don't give explicit position ; for example just add position:relative, without top/left...). And, good point, "position: relative" give haslayout to element in IE !

For example, if you want to put footer after a content, absolute is a bad idea because you probably don't know content's height. But if you want to put a menu at the top of screen but don't want to bother people who use screen reader (big menu should be at the end, on a linearized document), absolute positionning is perfect.

Float is not the perfect solution, as you can read on many blogs : it's a very particular postionning but it's usefull because 'inline-block' doesn't work all the time. And, of course, it's also usefull when you really want to have elements to be float.

Not so easy to explain when you don't speak english well :)

Answer 2

If an element contains text, you can't predict its height (because you don't know what font and what font size it will actually be rendered at).

That makes it impossible to place the top of one element at the bottom of another element. For example: Forget about having a traditional "Two column with header and footer" layout.

Answer 3

It's not either/or it's both... Float is good for some situations and position:absolute for others, therefore you may need to use both for your design. If you are serious about using CSS I suggest you buy and read this book http://www.transcendingcss.com/