SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)

    Float vs. Absolute Positioning

    Hello,

    Typically, when I create a website I always use floating divs to create the layout. While this normally works quite well, there are some instances that are tricking to do using floats. I've been reading lately that absolute positioning of elements have become pretty well supported and that a lot of people are starting to use them now.

    Lately, I've been considering experimenting with developing sites using absolute positioning to give me a finer degree of control over tricker layouts.

    So, before I start investing too much time into this, I'd like to know what are some possible problems or incompatibilities that are associated with using absolute positioning. Also, is using absolute positioning a well accepted way of building websites?

    Thanks.

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stick with floats, there's no reason to use absolute positioning. The problem with with absolute positioning is that there's no way to clear elements positioned that way. For example, if your sidebar is longer than your content, and you have the sidebar absolute positioned, it'll overlap your footer (assuming the footer spans across both the content and sidebar, as most designs do).

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I was under the impression that if you don't set a bottom, that the div would grow downward, and downward only. Also, I probably wouldn't position my footer, so it should just end up at the lowest point, without overlap.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://reference.sitepoint.com/css/floatvsabsolute

    Absolute positioning has its own complications, though. The main problem with this type of layout is that an absolutely positioned element is removed from the document flow, and doesn’t affect subsequent elements at all. A multi-column, absolutely positioned layout, in which any column can be the longest, makes it virtually impossible to display a footer at the bottom of the rendered document.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Ah, thank you. I didn't realize that they kind of floated above other stuff... hmm...

    Like I said, at this point I'm still just planning on "experimenting" with them for a while. Although, in the specific case I'm thinking of using it for, I know the exact height the columns will always be, so it wouldn't be a problem in that case.

    But, I am quite fond of floating as well, though I'm not too fond of having to use the faux column technique (though it is a good technique).

  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)
    Quote Originally Posted by samanime View Post
    Although, in the specific case I'm thinking of using it for, I know the exact height the columns will always be, so it wouldn't be a problem in that case.
    How do you know this? Do they just contain images? If they contain text then you don't know the height as users can increase or decrease the size of the text.
    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,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Although, in the specific case I'm thinking of using it for, I know the exact height the columns will always be, so it wouldn't be a problem in that case.
    When you fix the height of an element you are tying yourself to that height for all time and it makes for a very inflexible layout. As Tailslide also mentioned there will be issues with text resizing although you could use em height to accommodate a text resize.

    Absolute elements are removed from the flow and don't care about anything else which means that when you use then you have to make sure that everything else avoids the absolute element. As already mentioned above this is not possible if you want a footer underneath 2 or more absolute columns because there is no way to account for an absolute element in this way.

    If you have a simple layout with three columns across the page and no footer required (or a footer only under one of the columns) then an absolute layout will be fine and will work better than floats in this simple situation. Avoid setting heights though as that will only limit the usefulness of the layout.

    Otherwise (until something better comes along) you will mainly need to use floats for your structure where you want more than one column.

    But, I am quite fond of floating as well, though I'm not too fond of having to use the faux column technique (though it is a good technique).
    The faux column technique has nothing to do with floating specifically and absolute elements cannot have faux columns and do not circumvent the need for it either. You could simply give your floats a fixed height just like you were doing for absolute elements, although as I said above you shouldn't really do that.

    See my 3 col demo for ways of making equalising columns without images although at the cost of some complexity.

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I really need to stop posting at 4 am. -sigh-

    You're completely right about people being able to change the font.

    At present, all of my websites currently use floating, and it looks like they will probably continue to float as well.

    Thanks for the information. I've avoid absolute positioning because of the reasons that you've mentioned already, but I've been reading that they are becoming better, but I guess that was more hype then practice.

    It wasn't really the fixed height I was looking to using, it was just trying to find a simpler way to create a three column layout without the need for using the faux column technique (since it requires using an image).

    Thanks.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I've been reading that they are becoming better
    Well, IE7 handles absolute positioning better than IE6 did and you can specify an elements height and width by using all 4 values of top,bottom,left and right which is very useful for some designs.

    IE6 would only use either top or bottom but not both at the same time.Absolute positioning is a useful tool but just use it wisely and in the right place.

  10. #10
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up SEO and CSS

    Adding to this discussion.... I looked up Absolute Positioning here to see if it was good or bad... reason is, I am wondering about SEO.

    If I place my content first in my XHTML, aren't I doing my SEO a favor?

    ie...
    HTML Code:
    <div id="wrap">
    <div id="content"></div>
    <div id="header"></div>
    <div id="sidebar_1"></div>
    <div id="sidebar_2"></div>
    <div id="footer"></div>
    </div>
    Wouldn't that be a better layout for SEO?

    How do I get the header above the Content here w/o Absolute Positioning?
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    To get the content first without using absolute positioning you use floats to place the parts of the page where you want them. You can easily float the content right to place navigation etc to the left of it. If you want it in the centre then surround it and what goes to the right of it in a div and float that right with the content floated left.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    I understand that part, but I am wondering, how do I get the Header above the content if it is placed below it in the code using floats?
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I understand that part, but I am wondering, how do I get the Header above the content if it is placed below it in the code using floats?
    You can move a fixed height header up from below the left and right columns like this.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    #wrap{
        width:760px;
        margin:auto;
        border:1px solid #000;
    }
    #header{
        width:760px;
        margin:auto;
        height:150px;
        background:red;
        float:left;
        position:relative;
        margin-right:-1px;
    }
    #content{
        float:left;
        width:450px;
        background:#ffffcc;
        margin:160px -450px 10px 0;
    }
    #nav{
        float:right;
        width:300px;
        background:green;
        margin:160px 0 10px -299px;
    }
    #footer{
        clear:both;
        background:blue;
        width:760px
    }
    
    #othercontent{clear:both;background:yellow;width:760px}
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="content">
            <p>Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : Content first : content first : </p>
        </div>
        <div id="nav">
            <p>right column or navigation etc : right column or navigation etc :right column or navigation etc :right column or navigation etc :right column or navigation etc :right column or navigation etc :right column or navigation etc :right column or navigation etc :right column or navigation etc :right column or navigation etc :right column or navigation etc : </p>
        </div>
        <div id="header">
            <p>header content goes here</p>
        </div>
        <div id="othercontent"><p>Other content goes here Other content goes here Other content goes here Other content goes here Other content goes here Other content goes here  </p></div>
        <div id="footer">
            <p>Footer</p>
        </div>
    </div>
    </body>
    </html>
    You can't however place the header from any further down the page. Anything that follows the left and right columns must be cleared.

    (I believe there's a sticky thread in the seo forum that debates the effectiveness of content first and whether it makes much difference or not.)

  14. #14
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the post Paul, I did a search but it just sits there and spins. I'll check the SEO forum again in a few hours.
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!


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
  •