Absolute positioning or Float ?

Discussion in 'CSS' started by DarkCity, May 15, 2009.

0
  1. #1
    I'm sure this discussion has probably been beaten to death,
    i know this because i tried google before making this thread.

    So im new to css, and I am using DREAMWEAVER to build a website
    for a basic business site.

    I was just wondering, what would be the best option to use:

    Absolute Positioning
    or
    Float

    Also, if anyone has any video tutorials on how to make a good Float layout,
    please do send.


    Thanks guys!
     
    DarkCity, May 15, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    Depends. And that's the only answer. Too many people use float for everythiing and there's something dirty about that. But absolute positioning can be tricky if you aren't aware of how it affects other elements.
     
    drhowarddrfine, May 15, 2009 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    My rule of thumb is that anything that is going to have dynamic height and should effect the flow of other elements gets floated. Absolute positioning should only be used inside fixed dimensioned elements that are already in flow, or should not effect flow.

    What that means is, if you are making columns, use floats. If you are making a menu, float or inline-block. If you are doing sliding doors, glider-levin, you use absolute positioning, but you do so inside an element that remains in normal flow.

    Trying to micromange by absolute positioning your columns, menu elements, or other bits and pieces of your layout? Complete /FAIL/ because it's likely to either break somewhere, or rely on fixed metric fonts that have accessability issues.
     
    deathshadow, May 15, 2009 IP
  4. autouch

    autouch Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    They are not mutually exclusive, meaning both floats and absolute positioning can be used in a layout. Generally, floats have some issues with margins in IE6, but are quite flexible. Absolute positioning is not recommended when positioning the WHOLE of a layout but small elements within a layout.

    For example, menu bars and content wrappers should be floats while tabs that are in the most abnormal positions (such as vertical tabs on the edge of a content wrapper) can be positioned with absolute positioning.

    Hope this helps. I suggest downloading several nice and popular looking layouts and viewing their source html and css.
     
    autouch, May 15, 2009 IP
  5. DarkCity

    DarkCity Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks guys.

    I have been using Floats to make layouts, and just fooling around with it.

    I'm trying to convert a PHOTOSHOP layout, into a css website, its proven
    to be a bit difficult to get everything right.

    I've been trying to look for some templates to learn off, but I couldn't find any.

    Also, i want to make like a list of products in the content div, which each
    box will alternate colors. Should i be using an Advanced selector, or a Tag selector,
    to make those product post list?


    example - The gray and black, being the posts, holding images and text.
    ____________
    |___________|
    | [ gray ] |
    | [ black ] |
    | [ gray ] | <---#content div which inside a #wrapper div
    | [ black ] |
    |___________ |

    thanks.
     
    DarkCity, May 15, 2009 IP