SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)

    Positioning Debate

    Hey all. I've got a question I've been mulling over.

    Why should we position things with TOP and LEFT (in conjunction with, say, relative or absolute positioning) over margin-left and margin-top? They do the same thing (aesthetically), don't they? I understand that TOP and LEFT don't take up space, whereas margins to, but if you think about the web and the DOM as sort of Photoshop layers where you can place things on top of other objects, it should be the same, no?

    Really, I got the idea from an all-float layout with margins to space.

    Thoughts?
    ~TehYoyo

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    The big difference is that absolute positioning takes an element out of the flow of the document, whereas just using margins on an element will bump other elements around. It depends on what you need to do which method you use, but they are quite different. Mostly I would use margins, saving positioning for rare occasions when it's unavoidable.

  3. #3
    SitePoint Enthusiast Lil_Kins0's Avatar
    Join Date
    Mar 2012
    Location
    Nigeria
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guess this gona be a nice debate.
    I really don't this positioning well, can any one help with a good link for better understanding? TIA.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Hey all. I've got a question I've been mulling over.

    Why should we position things with TOP and LEFT (in conjunction with, say, relative or absolute positioning) over margin-left and margin-top? They do the same thing (aesthetically), don't they?
    No they are completely different things and have completely different functions.

    Margins push elements around from each other and maintain the flow of the document. If you change the margin on say the first paragraph then all the other (static) paragraphs also adjust to fit in with that new margin. The flow of the page is controlled and one element logically follows the next and maintains a relationship with the element above and below.

    Relative positioning on the other hand does nothing at all in essence apart from making the element appear to have moved. The element is only moved visually but not physically and the space the element originally occupied is always preserved. You can't use relative positioning to structurally lay out a page. It is used for far more subtle effects such as when elements need to overlap but at the same time not affect the page flow at all. If you move an element with relative positioning nothing happens to the other elements on the page. They consider that the element has not moved.

    Absolute positioning removes the element from the flow completely and is thus unsuitable for all but the very simplest of layout. It is best used in small doses where the page flow is already controlled by another element and you just want to push an element into the corner (or similar). Absolute elements don;t care about anything else. They will go wherever you put them but other elements will think that they are not there at all.

    Maintaining the flow of the document is one of the most important concepts and this is best done with static elements and margins. Floats are used for horizontal alignment but although they are removed from the flow you can get control back by clearing them (unlike absolute elements) and therefore still maintain the flow of the document.

    With a static layout you can remove one paragraph and all the others will shift up to fill the space. If the layout was all absolutely placed then you couldn't do that and you would have to manually move all the other absolute elements on the page which would not be viable.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    I posted something about this earlier, am just in a fog today and can't remember where.


    AP/RP is NOT ALWAYS the the same as margin aesthetically. Margin moves adjacent elements as well, positioning does not.

    Take the following makup:
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <em>consequat</em>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    p{position:relative;} em{ position:relative; left:10em;}
    the element moves and overlaps adjacent content, but a GAP is left in it's place where it used to be. You don't get rid of the space it occupies. nor does it move other content to occupy new space.
    p{position:relative;} em{ position:absolute; left:10em;}
    the element moves and overlaps adjacent content, NO GAP is left in it's place where it used to be. It doesn't move other content to occupy new space.
    em{margin-left:10em;}
    the element APPEARS to move, but in fact it is just 10em bigger on the left side as such it pushes other content out of the way.

    of course margin interacts differently if the element is floated, or block and margin can be added to AP/RP elements.. this is a nice trick for mixing measurements: eg.: left:10em; margin-left: -4px

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    No, no, no. I get what position: does, and what margins do, I was just wondering if it was possible to make an all-float layout with just margins for positioning.

    Thoughts?

    ~TehYoyo

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's how you should really be doing it .

    Position:relatives' use is as Paul states, for small aesthetical purposes such as a clever overlap. Really for layout, you shouldn't need it though .

    My entire site does not have one use of position .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Yes, that's how you should really be doing it .
    What is this mysterious 'that' that you refer to?

    ~TehYoyo

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    What is this mysterious 'that' that you refer to?

    ~TehYoyo


    'That' refers to float. I had hoped the rest of my post would infer what I meant. I'm sorry .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    What is this mysterious 'that' that you refer to?
    He was clearly referring to your previous statement: "I was just wondering if it was possible to make an all-float layout with just margins for positioning".

  11. #11
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    So we should be using all float layouts?

    I thought that someone said that that was unstable?

    ~TehYoyo

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    So we should be using all float layouts?

    I thought that someone said that that was unstable?

    ~TehYoyo
    Find me where someone says that .

    Just make sure to contain and clear your floats and there's no issues with it (besides a few documented IE bugs)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Find me where someone says that .
    I'm 99% sure that it's in this thread somewhere.

    I'm just too lazy/too busy to check

    ~TehYoyo

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    I'm 99% sure that it's in this thread somewhere.
    Nope .

    Read it. Only DS/Paul/I (and you) posted in the thread.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    So we should be using all float layouts?

    I thought that someone said that that was unstable?
    Floats are very stable. There are some other options that are becoming more usable as older browsers die off—such as display: inline-block and display: table and new stuff coming with CSS3—but floats still rule for now, IMHO.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    So we should be using all float layouts?

    I thought that someone said that that was unstable?

    ~TehYoyo
    You should only use floats when they are needed. If you float everything then indeed the page may be unreliable in older browsers and there simply is no need to float everything. Just float when you need horizontal alignment and make sure the floats are contained and cleared where necessary.

    Remember if you float the main container to contain its child floats then you can't use auto margins to centre it. Just float the items that need to be floated and the rest can mainly be static with the odd relative or absolute element thrown into the mix where appropriate.

    With CSS there is never a "one size fits all" because what you use depends on the job in hand and on what happens next. Just like you can't always contain floats with overflow:hidden because sometimes you want visible overflow (as in the case of a drop down menu).

  17. #17
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Gotcha. So if I can sum up what everyone's saying, CSS and the web is stable and therefore there isn't a single method that will work every time.

    ~TehYoyo

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Gotcha. So if I can sum up what everyone's saying, CSS and the web is stable and therefore there isn't a single method that will work every time.

    ~TehYoyo

    That's basically it

    The beauty of CSS and also the reason that beginners have difficulty with it is because there are a variety of ways of achieving the same layout. However, the methods are not all equal and the method you use will depend on the task in hand and how the layout should behave. That's why its often difficult to answer a simple question unless you know what the layout needs to do and how it is going to be used.

    It's also the reason you may find you get two different answers because in some cases alternative methods work just as well. There is no one approach that will work for all layouts because layouts differ in how they work and how they are used.


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
  •