SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    to float or not to float

    Andy Clarke in his book "Transcending CSS, the fine art of web design" on page 134ff is advocating the use of CSS positioning over floats for layouts.
    Whereas float-dependant layouts can easily fall apart at the slightest nudge, positioned layouts can support supersized image or gigantic text without failing, making them ideal to use...
    To force footers to drop below absolutely positioned columns he recommends "Inman position clearing" a combination of JavaScript and CSS, page 165ff. Anyone have any experience, comments on this?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    SitePoint Zealot zalucius's Avatar
    Join Date
    Jul 2007
    Location
    Denmark
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even with out reading the book, I would state that any design dependant on JavaScript is a bad idea...

    I think there is a bigger chance that some one disables JavaScript, and thus breaking the design, than doing proper float's/clear's in your markup/CSS.

    Writing the CSS with dynamics in mind, gives you alot more control, than relying on users to have JavaScript enabled.

    Also, all websites should work without CSS or JavaScript, they are there to enhancing the experience, adding richer design and functionality.

    Just my 2 cents.
    zalucius

  3. #3
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm a floater. I do find them sensitive, but they work for me. Add a footer div in a floated site is a breeze, no JavaScript required

    Obviously, I've not used the "Inman position clearing" since I don't use absolute positioning to design my websites, but I share the concern about having a layout that is dependable on JavaScript to work.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but what he (Andy Clarke) said is completely false and should be given the Old Yeller treatment, back of the woodshed and all.

    While floats do have their issues, they're nowhere near as bad as positioning, which can break at the slightest change by the user (resizing the text for example) or if there isn't enough content in the viewport (possibly due to the current browser window width for instance) to push a positioned element below another one.

    Floating doesn't have this issue, though I'd rather wait a decade to use CSS 3 in MSIE than use positioning for layouts.

  5. #5
    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'm another one for floating! I find it much easier than say Absolute Positioning.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    To Float

    You just need to understand the box model and what contributes to the width of elements to keep floats stable. When i'm making a layout with floats I often just create the pixel perfect width's so that it's stable and add a simple inner container that I can apply the border / padding to.

    Javascript? That's just completely unnecessary.

  7. #7
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    float floats my boat too!
    I am not a huge "floater" but won't dither to use it whenever I need it!

  8. #8
    SitePoint Member Anakin's Avatar
    Join Date
    Mar 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, i don't even know other ways than float and frankly i don't want to know.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    There's absolute positioning which is often preffered because it's simpler to understand at first.

  10. #10
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What bugs me though is the various techniques I have to use to please IE, height: 1%; overflow: hidden; display: inline; position: relative etc etc...... Like Dan, I can't wait for a better protocol for site layout..

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm all for floating too but if you understand absolute positioning and can create robuts layouts which I'd expect someone like Andy Clarke to be able to do then I don't see anything wrong with it.

    However, people who use software to drag and drop to create absolute or relative positioned layouts is a different matter all together.

    Personally though, float's are easy to use once you understand them and their potential problems so I'll continue to use them until we can start using things like grid positioning and multi-column layouts.

  12. #12
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by csswiz View Post
    I'm all for floating too but if you understand absolute positioning and can create robuts layouts which I'd expect someone like Andy Clarke to be able to do then I don't see anything wrong with it.
    I agree If you can build stable and robust designs with positioning then why not?
    Dan will probably disagree on this one?

  13. #13
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great feedback, guys. Many thanks. What would you recommend as a tutorial to help
    you understand them and their potential problems
    ?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  14. #14
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Position absolute is old time page layout Netscape 4 Layer time, even Dreawweaver 8 emphasis on it in design view

    It’s maintenance heavy if there is a lot of change, in content , content height

    The full way of Layer Layout had a very short live as view-port design or what was called DHTML in 1997 , heavily relying on (Java) Script control of Layers , usually staying on one page, screen, this made Dreamweaver Famous
    It was completely overshadowed by the fact that Tables could be used for layout, tables basically made it possible to move images any ware on screen , and the WWW rocket launch had a boost that still last, unfortunately ?, CSS what can we do with it, who needs it, time ?

    There has not been a question recently in the CSS forum on this kind of design that I know off

    You can make use of position absolute for special purposes, fine tune your design or special needs

    Flow or Float models are the way to go at the moment, but you never know, since IE 7 has better support for position absolutes , you can do newer other layouts that work cross browser


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
  •