It seems that there is a divide between people saying you should use absolute positioning and people saying you should use floats, both claiming that the other method breaks faster.
Of course, it’s all about when you use which method. In some cases, absolute positioning breaks faster and it’s better to use floats, while in other situations it’s better to use absolute positioning because floats would break the layout. luckily for us, there is one very simple rule:
If elements should not interact, use absolute positioning, if they should, use floats.
It’s that simple. Lets take this site for example. The searchform in the top right uses fixed positioning (which mostly behaves like absolute positioning) because it will, and it must, never interact with the other elements on the website. However if you scroll down to the footer, you can see 4 lists next to each other. It’s entirely possible that there are only two or three lists available. In that case, you do not want a gap on the left or in the middle, you want the elements to interact and line up nicely starting from the left. That’s what floats do for you.
If you want a more in-depts explaination of css positioning, check out my articles on them:
So, now you know that it’s not black and white (It’s grey!). There are times when you use floats, and there are times when you use absolute positioning. In my opinion, correctly styled floats are much more robust than absolute positioning, so I personally tend to use them more. How about you?
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
One term that keeps coming up in the design community as a stand-in for layout is “box model”, for example in “Why don’t design tools have the box model?” The CSS Box model is a well-defined term though, and it does not do layout. If we keep referring to our imaginary perfect layout system in design…
It’s important for FromScratch to be able to support different contexts. …
If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…
Hello.
If i have to work with elements that will have a fixed HEIGHT value then i’ll always use absolute positioning because it’s so easier and works perfectly in all browsers.
Great article. It’s always good to know exactly when what to do.
I prefer floats to absolute positioning as long as the design flow follows the markup flow. If that’s not the case, absolute positioning will do the trick. An example: In the markup we first have a logo, then some navigation and then some content. In most most cases the design flow is in the same order. However, sometimes we’d like to put the navigation on top, before the logo – that’s when absolute position becomes handy.
Vincent: I think fixed height elements should be avoided because they often break when the user increases font size (however, this problem is obsolete in newer browsers with zoom capability). If you need to use a fixed height, use a relative unit like em:s to specify the height. If you do, your design will not break when the user increases font-size.
Using absolute for anything with content in normal case is just plain wrong. Everything need to interact with each other, I can’t understand why someone would use absoltue positioning with content unless they are css beginner
Cedric Dugas, if you think absolute positioning is only for placing elements at fixed locations on a web page, then who is the beginner? With absolute positioning, you can position elements relative to another one. It’s just another technique.
I misunderstood the article sorry, i was thinking you were talking about a full 3 column interactive design in absolute..
I can see your point but i tend not to use absolute, relative to one another , mainly because IE6 don’t respond well to that. Float work well anyway in most case, and since my design are often all float column based it’s easier this way.
I use absolute mainly when i need rounded corner, or fixed position content in a relative div.
Correct me if i’m wrong, but isn’t that there purpose anyway?
By the way I apologize, I did not want to insinuate that you were a beginner by any mean, i just read and write fast at work sometimes !
My comment is an addition to Jonathan his comment. I only use absolute or fixed positions for elements I want to keep in a logical order on my website. Your search form, for example, would be at the bottom of the HTML if I coded it.
An important addition to your article: do not hide skiplinks and hidden ‘extra’ information for usage by screen/braille readers, by using
display:none, but withposition:absoluteandleft:-9999emor similar. That’s because screen/braille readers do not ‘display’ information hidden bydisplay:noneorvisibility:hidden.By the way, the Dutch Web Guidelines have one that is quite odd: ‘put the most important content of your page at the top of your HTML‘. It can be interpreted as ‘put your navigation at the bottom’. With absolute position you get that navigation back on top again. As said, a quite odd guideline. (Browse to some of the ministry websites to see that one in practice.)
Cedric: There are some mayor bugs in how IE (both 6 and 7) handles floats. Absolute positioning can be extremely useful in some cases, as pointed out in the article,
[…] differences between absolute positioning and floats when used for layout, and when to use which. View source //default banner house ad url clicksor_default_url = ”; clicksor_banner_border = ‘#f8f7f0’; […]
[…] ABSOLUTE POSITIONING VS. FLOAT […]
However, you can also create fully fluid 3 column layouts with AP, so there really is no reason to be so ignorant twords the use of AP
[…] Absolute Positioning vs Floats – Kilian Valkhof […]
[…] Source […]
[…] Source : Absolute positioning Vs. floats […]
[…] rule: If elements should not interact, use absolute positioning, if they should, use floats. – Absolute positioning Vs. floats – CSS & (X)HTML – Kilian Valkhof […]
Thanks a lot man, gr8 article
Each to his own; I think both has a place in web design. Absolute sure does make laying out page easier though…great article as always!
Wonderful article. I really like the practical cases you use as an example.
Myself, I tend to use float over absolute positioning.
Regards,
Rui
Nice tutorial i prefer floats if i don’t need the element to stay above other elements
make more tutorials
this is great
I use both and most of the times I use them togheter, for example if I have to position more then one element into a div and these elements must be positioned one on the left, the second in center and the last one on the right, I use this method:
and it works perfectly in all browsers, I only use float when I have more elements, contiguous and aligned like in your footer.
Best way is to know well both of them, and use them correctly.
Diego
div.container{float:left; position:relative;}
div.container div.left{position:absolute; top:0; left:0;}
div.container div.center{position:absolute; top:0; left:50%; margin:0 0 0 -element.width;}
div.container div.right{position:absolute; top:0; right:0;}
Nice informative blog, thanks for sharing.
I use absolute positioning for when a web-page is completely static (i.e, no comments anywhere, no blogs, nothing…). Since the page is always going to be the same then it is simpler and more effective to us a.p. When a webpage has comments, has changing content, then I either use php with a.p to make everything absolute, or just make things flow.
On another note, I’m a newbie and I was wondering, do you guys know how to make an in-page anchor move you so the element you are anchoring to appears in the middle of the page instead of the top? Do you need javascript for that?