CSS Position vs Float

Howdy, new to the forum,

I have a question or 2 regarding the structuring/layout of a design using CSS.
I suppose the first thing that comes to my mind is when do you decide to use relative and absolute positioning and when do you decide to use floats when laying out your design?

Would I be right in saying:
If using position: to layout a page/design, it is best to create a container div which is set to position:relative, allowing header, content and nav divs inside the container div to be set to position:absolute, allowing these divs to be positioned relative to the container div. This makes sense to me allowing each div element to be positioned within the container.

If using floats to layout a page, do the divs automatically center on the page? also would it be advisable to use a container div when using floats. Floats do seem a bit more vague, would I be right in thinking you must use margins and borders to control spacing between float elements?

I suppose basically what I want to know is what in your opinion is the better method of laying out a page or if you use both when would you use the different methods.

Thanks for any help

C

I find that I rarely use positioning especially absolute positioning. There are a few reasons for this.

First using positioning for global layout leads to vast differences in how your page renders in many browsers (float is somewhat more similar in its interpretation). Second I find that its much easier to allow for fluid content (CMS/Varying lengths of copy, etc) if you leave the page flow the same in the html and presentation. In other words a float is always relative to its parent etc in the page flow so if something has to flex in size the layout won't break where positioning frequently requires you to manually change the location of an object to keep your layout intact.



Div's don't automatically center. They are by default the entire width of their container (if the body is the container they are 100% the width of the body). If you set a div's width and give it a float it will attempt to reposition itself to which ever side the float is set. If there's something else (floated) in its way your div will bump up against that other floated element.

Use floating, heights and widths, margin and padding whenever possible because that generally does the job. Positioning takes the element out of the flow of the document. I only use positioning when absolutely necessary, say if I want to float a pop up when creating CMS dialogue boxes, generally hiding them until needed... Or if floating really fails.

Also another tip someone told me... if you float right you should put the div before anything else that should be floated left... don't ask why - it's stupid and it just is.

i.e.



Also a good idea is to come up with a clearfloat class so that you can clear everything and get a clean break.

i.e.



in your class set clear:both some padding and margin, height to 0 or 1px... can't remember everything on this, but you can find this technique on the net.