Kilian Valkhof

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 with position:absolute and left:-9999em or similar. That’s because screen/braille readers do not ‘display’ information hidden by display:none or visibility: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,

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

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?