SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Thread: Best css layout method?
-
Jun 20, 2006, 07:14 #1
- Join Date
- Sep 2005
- Posts
- 159
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Best css layout method?
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?
-
Jun 20, 2006, 07:36 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
But I've read that float shouldn't really be used to create layouts.
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
-
Jun 20, 2006, 07:47 #3
- Join Date
- Sep 2005
- Posts
- 159
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
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.
-
Jun 20, 2006, 07:47 #4
- Join Date
- Feb 2006
- Location
- Bedford, UK
- Posts
- 1,687
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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*)
-
Jun 20, 2006, 07:50 #5
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Enoch Root
Where ?
-
Jun 20, 2006, 07:55 #6
- Join Date
- Feb 2006
- Location
- Bedford, UK
- Posts
- 1,687
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The article I read on this general theme was this: http://dbaron.org/log/2005-12#e20051228a
-
Jun 20, 2006, 08:06 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
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/
-
Jun 20, 2006, 08:19 #8
- Join Date
- Sep 2005
- Posts
- 159
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
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!
-
Jun 20, 2006, 08:22 #9
- Join Date
- Sep 2005
- Posts
- 159
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by all4nerds
-
Jun 20, 2006, 08:28 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I'm beginning to realise that for every web guru that says x is bad, there's another one that says x is good
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
-
Jun 20, 2006, 08:30 #11
- Join Date
- Sep 2005
- Posts
- 159
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Jun 20, 2006, 08:35 #12
- Join Date
- Sep 2005
- Posts
- 159
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
-
Jun 20, 2006, 09:17 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
According to my colleague the floated layout I have set up for him doesn't display correctly in Dreamweaver
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
Bookmarks