in which situations use of positioning would be a better option than float?

Question

How positioning can save our time if we use in place of float on some place in layout coding?

How we can judge where positioning would give better result?

For example (i added just for example) if this is a design

So far i only use float + margin + padding, now if i can mix positioning and save time and get pixel perfection easily then float.

Guide me

Thanks in advance.

Update 1:

these are common elements of website. should i use positioning for any of them?

The Header
 ---logo
 ---serch box
 ---The Navigation Menu
 ---top links
 ---Breadcrumbs

The Text Area
 ---Paragraphs
 ---images( left , right or center align)
 ---Tables
 ---vertical ordered and unordered list

The Sidebar
 ---vertical ordered and unordered list


The Footer
 ---copyright
 ---Important Links (horizontal list)

Form elements

Update 2:

• Does positioning have any Compatibility issue(including IE6) than float?

• Is positioning is only good for fixed width design or it's good for both liquid and fixed?

Answer 1

For that layout, you don't need to use nothing else than floats, margins and paddings. Positioning (relative, absolute, fixed) should be used only in 'special occasions', eg. when you want to lift an element out of the document flow and place it somewhere it would be otherwise hard to place.

You won't save any time and won't get any more 'pixel perfect' results with positioning. You should be able to do that using traditional methods.

The only reason you should use absolute positioning in that layout is because of the RSS icon, that's a 'special occasion' I was talking about.

Answer 2

Looking at the design there is minimal need to using positioning, the only I can see it may be need is t give the overlapping effect on the RSS icon but even then you could do some trickery with background images to give the effect that it is overlapping.

On my sites I use position if I need to give the user the experince that elements overlap outside of the box model. Otherwise you should be fine floating, padding and using margins.

One tip howerver if you are using position:absolute; make sure the parent element has position:relative;