1 Awesome step-back to basics

I can’t really believe how much I didn’t understand and had forgotten about css positioning… It’s a bit depressing to be honest. I’ve probably taken it for granted because everything I’ve done has been on-the-go and I haven’t really needed to learn all of the theory behind stuff like css positioning.

Thanks for the awesome article and I really like your website, despite it’s simplicity.

posted at 09:37 am on November 16, 2010 by traxor

2

I never realised quite how redundant the CSS spec is. The final two lines of this selection are almost insultingly pointless and unhelpful.

“Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.”

posted at 10:43 am on November 16, 2010 by Matt Andrews

3 Excellent Article

Thanks for this well written article. It really helps describe the elements. However, I believe the code listed for example H is incorrect. It doesn’t match the code on the sample page.

Thanks again.

posted at 11:44 am on November 16, 2010 by Dennis B

4 Unnecessary container in example J

Nice summary with demonstrative examples.

A remark to one thing you’ll find zillion times: In example J, the ‘#container’ element (which is the only child of ‘body’) is not needed. With ‘html’ and ‘body’, there are already two containers waiting to get styled.

Just apply the rules for ‘body’ to ‘html’ and the rules for ‘#container’ to ‘body’ and you’re done without this ‘div’.

posted at 12:08 pm on November 16, 2010 by Gunnar Bittersmann

5

even though the rest of the article seems pretty basic:
using position:absolute together with values for all 4 sides to stretch an element relative to it’s container is the best css trickery i’ve seen for a long time. thanks for this.

posted at 12:08 pm on November 16, 2010 by schellmax

6 Great refresher

This came just a little too late for me, but brilliant anyway.

I’m a developer rather than a designer, but about once every 3 months I find myself having to create a new CSS layout for a website. My old technique was always the trial-and-error “let’s try position: relative and see what effect that has”, but the last time I had to do it (having read various things) I discovered that suddenly I understood why position: relative affected child elements, and what the absolute offsets were absolute in relation to.

If only I’d read this a year or two ago, I don’t think I would’ve had to go through all that trial-and-error pain :)

posted at 12:20 pm on November 16, 2010 by skilldrick

7 Perfect timing!

Unlike skilldrick above, this article is dead on with its timing. Just what I needed for a site I’m currently working on! All the examples are easy to follow and understand, and don’t require lots of weird CSS twistiness to achieve results. Thanks!

posted at 12:45 pm on November 16, 2010 by graylensman

8 Great article

Thanks for the great article on positioning. This is a topic that really needs to be understood by anyone hoping to design top-notch websites.

posted at 01:50 pm on November 16, 2010 by HappyCoder

10 The position property should *not* be used for lay

With the position property’s power, you can accomplish many a layout with confidence and success

Imho, using position absolute to create layouts goes against best practice since it removes elements from the flow which creates issues depending on content and user settings.

For example, the last demo shows that adding content to the “callout” container breaks the whole page.

As a side note, position relative triggers a new stacking context in IE6 which creates another type of problem.

posted at 02:47 pm on November 16, 2010 by Thierry Koblentz