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.
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.
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.
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
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.
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 :).
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”.
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.
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).
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.
