Results 1 to 9 of 9

Thread: CSS Position vs Float

  1. #1
    Frontpage User
    Join Date
    Mar 2009
    Posts
    7
    Post Thanks / Like

    Default CSS Position vs Float

    Howdy, new to the forum,

    I have a question or 2 regarding the structuring/layout of a design using CSS.
    I suppose the first thing that comes to my mind is when do you decide to use relative and absolute positioning and when do you decide to use floats when laying out your design?

    Would I be right in saying:
    If using position: to layout a page/design, it is best to create a container div which is set to position:relative, allowing header, content and nav divs inside the container div to be set to position:absolute, allowing these divs to be positioned relative to the container div. This makes sense to me allowing each div element to be positioned within the container.

    If using floats to layout a page, do the divs automatically center on the page? also would it be advisable to use a container div when using floats. Floats do seem a bit more vague, would I be right in thinking you must use margins and borders to control spacing between float elements?

    I suppose basically what I want to know is what in your opinion is the better method of laying out a page or if you use both when would you use the different methods?

    Cheers

    C

  2. #2
    Wannabe Geek
    Join Date
    Jan 2007
    Location
    Navan, Co Meath
    Posts
    107
    Post Thanks / Like

    Default

    I use the latest to layout sites. I found the absolute positionning a lot trickier to work with, particularly when considering different window sizes, browsers etc.

    With relative positionning there is little you cannot really. Yes you can use the margins to space out your floated elements.
    Beware though, IE6 tends to be a bugger with the floats, make sure you check in various browsers and versions (for IE any way)

  3. #3
    Wannabe Geek
    Join Date
    Jan 2009
    Posts
    437
    Post Thanks / Like

    Default

    I have a preference for floats, they work particularily well with CMS systems where you want to overwrite default formatting, etc.

    Floated divs rely on containers to work properly and remain centered on a page. You cannot center a floated "left" div really. Margins, padding and borders normally will help you define where a floated div is displayed. The main advantage for floated divs is that they generally will not collapse, but older browsers will probably fail under certain content.

  4. #4
    Wannabe Geek garycocs's Avatar
    Join Date
    Oct 2007
    Location
    Dubland
    Posts
    342
    Post Thanks / Like

    Default

    Quote Originally Posted by oliflorence View Post
    I use the latest to layout sites. I found the absolute positionning a lot trickier to work with, particularly when considering different window sizes, browsers etc.

    With relative positionning there is little you cannot really. Yes you can use the margins to space out your floated elements.
    Beware though, IE6 tends to be a bugger with the floats, make sure you check in various browsers and versions (for IE any way)

    the latest?? Is that a typo or is there some easy to use tool I'm missing out on

  5. #5
    Frontpage User
    Join Date
    Mar 2009
    Posts
    7
    Post Thanks / Like

    Default

    It seems floats are the more common method of laying a page out. I came across a site using a container div position relative with a min and max width, inside it side nav and main content area divs each using float, works well allows a certain amount of fluid design but when stretched out on a large resolution it doesnt go past a certain point. Does anybody use a process like this themselves?

  6. #6
    Wannabe Geek
    Join Date
    Jan 2007
    Location
    Navan, Co Meath
    Posts
    107
    Post Thanks / Like

    Default

    minimum and maximum width doesn't work in older versions of IE, not even sure if it works well in newers as I am in the habit to avoid it at this stage.
    Working with containers is ideal for floats. Don't forget to clear the float once you don't need it any more <div style="clear:both;"></div>

    the latest?? Is that a typo or is there some easy to use tool I'm missing out on
    Typo yes, meant the latter

  7. #7
    Frontpage User
    Join Date
    Mar 2009
    Posts
    7
    Post Thanks / Like

    Default

    What do you mean by clearing the float once you don't need it anymore ?

    Ah right god dam IE, isn't there a way of containing floats so they don't expand past a certain point, for example if i expand the screen to a large resolution the float will stop at a certain point. In find it frustrating when a float layout expands so much that there are 200 words on one line!

    A basic idea:
    A container div position:relative with a specified width (basically for a maximum width) with say 2 floating divs inside, a vertical nav bar and content area. Would this be an effective method of allowing a certain amount of liquid design without going overboard.

  8. #8
    Wannabe Geek
    Join Date
    Jan 2007
    Location
    Navan, Co Meath
    Posts
    107
    Post Thanks / Like

    Default

    That's the reason why I shift to Mozilla Firefox.
    Unfortunatly it isn't really about what browser you are using, the vast majority of people are still using IE so you have to design for all. Perhaps Google Chrome will put an end to the IE supremacy?

    Cillian,
    if you float 2 elements that are within a container, for instance a left and right column, if one is higher, for instance the left is 800px and the right is 400, any elements you may place under the right column, for instance a p tag, within your container will keep floating the to the right of your left colum. Clearing the float means telling the browser that you no longer wants things to float.
    It is easy to manage without if you do a static design but if you have a CMS for instance your customer could make the height of your columns vary. Clearing your floats is good practice anyway.

    If you are starting in CSS layout I would recommend the O'Reilly book, Cascading style sheet, the definite guide. Well worth taking the time to read.

    Hope this helps

  9. #9
    Frontpage User
    Join Date
    Mar 2009
    Posts
    7
    Post Thanks / Like

    Default

    ahhh yeah have used clear:both, phrased it a bit vague

    I picked up a book called Stylin with CSS, very good, clear and to the point, covers alot of ground. I also checked out lynda.com css web design was fairly poor, the guy who made it knew his stuff but it was all over the place.

    Thanks for the help

    Cillian

Similar Threads

  1. Problem with IE 5.5 / 6 and position absolute
    By Forbairt in forum Coding Help
    Replies: 10
    Last Post: 14-01-2008, 03:18 AM
  2. SEO Tool - Google Position Checker!
    By goodmaster in forum Search Engine Optimisation
    Replies: 2
    Last Post: 30-09-2007, 06:53 PM
  3. Full Time Position Available
    By dave in forum Marketplace Requests
    Replies: 1
    Last Post: 24-01-2007, 10:11 AM
  4. Contract Position Available
    By Web-job in forum Marketplace Requests
    Replies: 25
    Last Post: 18-01-2007, 12:49 PM
  5. Relative worth of position
    By gothwalk in forum Search Engine Optimisation
    Replies: 4
    Last Post: 19-09-2006, 02:48 PM

Visitors found this page by searching for:

css position vs float

float vs position

float or position

CSS position vs display

position vs float

float vs position css

css float VS positioning

float vs positioning

position or float

position vs display css

position float

absolute positioning vs float

position absolute vs floatgoogle position absolute et floatposition vs float layoutcss positioning divs for seocss float seolayout position vs floatabsolute positioning vs floatspositioning vs floatfloat positionCSS positioning Vs CSS float layoutgoogle float Position absoluteabsolute vs floats best practicefloating vs absolute or relative posiotioning

Tags for this Thread

Posting Permissions

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