Thread: CSS Position vs Float

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)

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.

Originally Posted by 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)

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

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?

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

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.

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

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