Best css layout method?

[Enoch Root]

I've been using css layouts for several years. I first used absolute positioning but recently have been using float, and found it much easier. But I've read that float shouldn't really be used to create layouts. I'm wondering what is the best method and what are the major drawbacks/ bug effecting them?

[Paul O'B]

But I've read that float shouldn't really be used to create layouts.

Whoever told you that doesn't know a thing about CSS i'm afraid.

Floats are the most versatile tool in the css toolbox and although they may not have been specifically designed to create whole layouts they can in fact be used very well in most instances.

Absolute positioning in layouts has limited use because you lose the document flow and there is no easy way to recover it. Floats on the other hand can be cleared to regain the flow of the document and elements can continue logically.

Most layouts are in fact a mixture of static, floated and absolute positioning and when used correctly then most types of layouts can be created.

Floats are not without their problems though and there are certain obstacles to overcome (such as the 3 pixel jog, double margin bug, float drop etc) but once you understand these you can design around the problems.

You can read up on floats in the faq and then you will be set to go

[Enoch Root]

Whoever told you that doesn't know a thing about CSS i'm afraid.

Well, that's what I thought as I say I found floats much handier, more logical, and more flexible than absolute positioning, and have been using two column layouts with float for a few years without encountering any problems. I must admit I don't know the full details of the bugs you mentioned - so I will read up that FAQ, thanks.

One issue I have encountered with a 3-column layout is that the right hand column jumps down below the left hand column in IE "before " it does in Firefox, if you see what I mean - i.e the layout is ruined in IE while it still looks ok in Firefox.

Thanks again.

[Tailslide]

I remember reading that article too - I wouldn't worry too much about it. Currently floats are probably the easiest way to lay out a page.

The Semantic Web "community" likes to torture itself occasionally - this is an example of that.

There's "Wrong" - using tables for layout (big bad no-no)
Then there's "Wrong" - using floats for layout (*shrug*)

[all4nerds]

But I've read

Hello

Where ?

[Tailslide]

The article I read on this general theme was this: http://dbaron.org/log/2005-12#e20051228a

[Paul O'B]

One issue I have encountered with a 3-column layout is that the right hand column jumps down below the left hand column in IE "before " it does in Firefox, if you see what I mean - i.e the layout is ruined in IE while it still looks ok in Firefox.

When a float is squeezed then it will look for room below other floats. Often in IE this will happen sooner than firefox due to one of the float bugs I mentioned above (or those mentioned in the faq).

Some would say that in a fluid layout then the float should always drop down to allow the page to get smaller but this of course does break the look of the layout. In a fixed width layout this is not a problem.

The common cause of floats fropping down is that the content inside the floats is squeezed as much as it can be (such as iwhen it contains mages) and therefore IE will drop the float once this minimum width has been reached. You need to make sure that your content is as fluid as it can be when using fluid width floats.

Otherwise you could use a min-width expression to hold the page open just before the float drop occurs. You could also hide the overflow and clip the content which will cure the float drop.

Another reason for float drop us when you have say 2 floats of 50% width each and then ie makes them add up to 100.1% which is too big for the container and then one float must drop. In these cases you need to set one float to 49.9% or add a negatibve 1px margin to one of the sides to counteract this.

There are other ways to avoid dropping and can be seen in this demo.

http://www.pmob.co.uk/temp/2col-nofloatdrop.htm

To see what you can do with floats have a look here also:

http://blog.html.it/layoutgala/

[Enoch Root]

To see what you can do with floats have a look here also:

http://blog.html.it/layoutgala/

Yummy! That site has been duly bookmarked!

Thanks Paul. I'm beginning to realise that for every web guru that says x is bad, there's another one that says x is good. I say, if it works - fine!

[Enoch Root]

Hello

Where ?

I think it was on Faruk Ates' site, but I can't find it now, so apologies to him if I'm wrong.

[Paul O'B]

I'm beginning to realise that for every web guru that says x is bad, there's another one that says x is good

That's Life

The comments in the dbaron blog are interesting but don't say what you should be using instead of floats and offers no solutions other than pointing the finger at some innovative layouts.

The fact that floats work in 99% of browsers should be proof enough. If there was an easier more reliable and foolproof method then we'd all use it in an instant

[Enoch Root]

One problem I have (or to be more accurate, a colleague has) is with Dreamweaver and Contribute. According to my colleague the floated layout I have set up for him doesn't display correctly in Dreamweaver (although it works for me). I have noticed this occasionally in the past but it doesn't bother me. However he thinks it will also display incorrectly for Contribute users, and that may be a problem. I haven't seen the problem for myself in this instance, but has anyone else encountered this sort of problem, and if so what did they do about it?

[Enoch Root]

That's Life

The comments in the dbaron blog are interesting but don't say what you should be using instead of floats and offers no solutions other than pointing the finger at some innovative layouts.

The fact that floats work in 99% of browsers should be proof enough. If there was an easier more reliable and foolproof method then we'd all use it in an instant

So it's official - floats rule!

[Paul O'B]

According to my colleague the floated layout I have set up for him doesn't display correctly in Dreamweaver

Dreamweaver is not a browser and cannot be relied upon to imitate a browser. DW8 has better css support but is far from perfect. I use DW8 but I never use design view and just work in code view all the time. If I want to see what the layout looks like I check it in a few browsers.

Of course for the in-experienced then this may be a problem if they need a simple way to update a page but the problem isn't limited just to floats but many aspects of css.

I'm not sure what your options are in those cases other than updating it yourself or educating your colleague