SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    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?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2005
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    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.

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    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*)
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Enoch Root
    But I've read
    Hello

    Where ?

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    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
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 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.
    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/

  8. #8
    SitePoint Zealot
    Join Date
    Sep 2005
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    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!

  9. #9
    SitePoint Zealot
    Join Date
    Sep 2005
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 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
    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

  11. #11
    SitePoint Zealot
    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?

  12. #12
    SitePoint Zealot
    Join Date
    Sep 2005
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    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!

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •