CSS Position vs Float

[cillianh]

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?

Cheers

C

 

[oliflorence]

I use the latest to layout sites. I found the absolute positionning a lot trickier to work with, particularly when considering different window sizes, browsers etc.

With relative positionning there is little you cannot really. Yes you can use the margins to space out your floated elements.
Beware though, IE6 tends to be a bugger with the floats, make sure you check in various browsers and versions (for IE any way)

 

[Byron]

I have a preference for floats, they work particularily well with CMS systems where you want to overwrite default formatting, etc.

Floated divs rely on containers to work properly and remain centered on a page. You cannot center a floated "left" div really. Margins, padding and borders normally will help you define where a floated div is displayed. The main advantage for floated divs is that they generally will not collapse, but older browsers will probably fail under certain content.

 

[garycocs]

I use the latest to layout sites. I found the absolute positionning a lot trickier to work with, particularly when considering different window sizes, browsers etc.

With relative positionning there is little you cannot really. Yes you can use the margins to space out your floated elements.
Beware though, IE6 tends to be a bugger with the floats, make sure you check in various browsers and versions (for IE any way)

the latest?? Is that a typo or is there some easy to use tool I'm missing out on

 

[cillianh]

It seems floats are the more common method of laying a page out. I came across a site using a container div position relative with a min and max width, inside it side nav and main content area divs each using float, works well allows a certain amount of fluid design but when stretched out on a large resolution it doesnt go past a certain point. Does anybody use a process like this themselves?

 

[oliflorence]

minimum and maximum width doesn't work in older versions of IE, not even sure if it works well in newers as I am in the habit to avoid it at this stage.
Working with containers is ideal for floats. Don't forget to clear the float once you don't need it any more <div style="clear:both;"></div>

the latest?? Is that a typo or is there some easy to use tool I'm missing out on

Typo yes, meant the latter

 

[cillianh]

What do you mean by clearing the float once you don't need it anymore ?

Ah right god dam IE, isn't there a way of containing floats so they don't expand past a certain point, for example if i expand the screen to a large resolution the float will stop at a certain point. In find it frustrating when a float layout expands so much that there are 200 words on one line!

A basic idea:
A container div position:relative with a specified width (basically for a maximum width) with say 2 floating divs inside, a vertical nav bar and content area. Would this be an effective method of allowing a certain amount of liquid design without going overboard.

 

[oliflorence]

That's the reason why I shift to Mozilla Firefox.

Unfortunatly it isn't really about what browser you are using, the vast majority of people are still using IE so you have to design for all. Perhaps Google Chrome will put an end to the IE supremacy?

Cillian,
if you float 2 elements that are within a container, for instance a left and right column, if one is higher, for instance the left is 800px and the right is 400, any elements you may place under the right column, for instance a p tag, within your container will keep floating the to the right of your left colum. Clearing the float means telling the browser that you no longer wants things to float.
It is easy to manage without if you do a static design but if you have a CMS for instance your customer could make the height of your columns vary. Clearing your floats is good practice anyway.

If you are starting in CSS layout I would recommend the O'Reilly book, Cascading style sheet, the definite guide. Well worth taking the time to read.

Hope this helps

 

[cillianh]

ahhh yeah have used clear:both, phrased it a bit vague

I picked up a book called Stylin with CSS, very good, clear and to the point, covers alot of ground. I also checked out lynda.com css web design was fairly poor, the guy who made it knew his stuff but it was all over the place.

Thanks for the help

Cillian