Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)
like image 674
Jitendra Vyas Avatar asked Feb 09 '10 07:02

Jitendra Vyas


2 Answers

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 :)

like image 62
Alysko Avatar answered Oct 07 '22 18:10

Alysko


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/

like image 27
Frozenskys Avatar answered Oct 07 '22 17:10

Frozenskys