Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts

    Floating vs positioning

    Hello, I did search the forum before creating this topic but the thread I found was over 1 year old and there was a message saying its frowned upon to revive threads over 1 year old, so for that reason I created my own.

    I am wondering whether I should be using floats or using position: relative/absolute to position things?

    I float pretty much all my content but I wanted to know if positioning things make a site more flexible/compact. Not sure of the pro's and con's of each. I've always been advised to steer clear of positioning things absolutely, so I kinda dropped relative and never bothered to learn it.

    Can anyone shed some light for this issue?

    Kind regards,

    LC.

  • #2
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    Hmm, well it's one of those questions that is.. not the right question. All elements are positioned, the real seperation is between static (default) & relative positioning, in which elements must respect each-other in the element flow, and absolute & fixed positioning, in which they are removed from the element flow. All elements are following one positioning rule or another, so floating elements are positioned as well. However, you can't float absolutely positioned elements (I'm thinking fixed elements too, I've never checked).

    It is like compairing a nail and a screw in a lot of cases, when trying to decide on how to position, or if you should float, since it depends on the job at hand more than anything. A good page will respect the element flow, don't abuse absolute positioning as the lazy option. If something seems like it should be part of the element cascade, then it probably should be! I dare say most elements should be, with the odd exception. If you take your time to fit the puzzle of elements together nicely in relation to each-other you will end up with efficient code, your pages will be less likely to fall appart, and of course it makes dynamic layout a lot simpler. Floating elements is still respecting the flow.

  • Users who have thanked Custard7A for this post:

    LearningCoder (12-09-2012)

  • #3
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Each to their own I guess. If the website looks great in all resolutions, browsers; just do what is easiest for yourself really.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The answer is: "it depends"! Here is a good article to read.

    But to attempt to summarise..in VERY broad terms:

    (always) give 1st preference to "static";
    consider "float" to achieve desired layout or, for example, to float images within a larger textual-area;
    then "relative", but mainly to supply a content for "absolute" and other positioned elements;
    avoid "absolute" but, if used, tend to do so in the context of another (relatively) positioned element;
    "fixed" is used rarely, but occasionally is used to fix a small element at one side of the browser window.

    Specific layouts are mainly achieved using floats, but some layouts can also be achieved with a combination of relative and absolute positioning. Percentage and/or fixed widths on elements are also used to achieve a desired layout and behaviour. cf liquid layouts.

    People sometimes resort to positioning of elements when they haven't fully explored the use of margins and padding to separate elements.

    And avoid DIVITIS!

    I may have confused rather than helped?? but the links are good
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You need to use position:relative and position:absolute when you want elements to overlap. The rest of the time floats generally work better.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Thank you very much for your replies.

    After reading the link from Andrew, it still seems very much a gray area. I think the best way to learn would be putting it into practice and creating a simple site using positioning for everything, just to get a feel for it and see what the results are. It's definitely an area of CSS which I am lacking so i'd like to close the gap.

    I'll keep updating the thread with any issues which arise but again thank you all very much for the replies. Seems there are many different opinions on it so it's definitely worth taking a stab at it for future projects. I can seem to get things where I need them using floats with ease but I'd like to try different approaches to gain the same effect.

    Kind regards,

    LC.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Seems there are many different opinions
    I don't think this is the case, we've just emphasised different aspects of this topic.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Ok, so it's really down to my preference? I'm floating anything I need to at the minute to position it then just clearing the next element and floating, or leaving static, depending on what I need to do. Use fixed for things you want to be 'fixed' on the page or absolute when you need to do something a bit different, say overlapping it over another element?

    Regards,

    LC.
    Last edited by LearningCoder; 12-09-2012 at 11:48 PM.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by LearningCoder View Post
    Ok, so it's really down to my preference? I'm floating anything I need to at the minute to position it then just clearing the next element and floating, or leaving static, depending on what I need to do. Use fixed for things you want to be 'fixed' on the page or absolute when you need to do something a bit different, say overlapping it over another element?

    Regards,

    LC.
    Yeah, kinda I think you will only obtain some clarity by exploring - putting in the time
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    When creating a site I generally go for that approach, creating a main container but I center it using margin: auto instead. Within there I usually create a heading div, either put the nav inside or create a separate div for a nav. Content div below and either the footer div inside or just outside the content div.

    Got the full day now to create a simple page using the relative and absolute stuff so I'ma give it a go.

    I feel I have a bit of a better understanding from before I started this thread so thanks for the replies!

    I'll most likely run into issues so I'll probably post later. Will give that site another thorough read.

    Regards,

    LC.


  •  

    Posting Permissions

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