CSS Positioning 101

[Huppie]

If you're like me and like a quick-summary over a lengthy article, you might like this article: 'Learn CSS Positioning in Ten Steps'[0]. It quickly summarizes all the positionining properties, and how top/left/float/clear etc helps.

[0]: http://www.barelyfitz.com/screencast/html-training/css/posit...

[AlexC04]

I actually just logged in to leave a link to the Barley Fitz version. I've used his primer more times than I can count.

[bantic]

I like this one a lot. Simpler CSS, less verbose, and the in-context visual examples make it a lot easier to follow along.

[krosaen]

nicely explained. one key trick they're missing: position:relative + position:absolute, which I find myself using more than position:absolute alone. With a parent of position:relative, child position:absolute elements are position absolutely within the parent. Nice for centering overlays and things like that.

[stanleydrew]

In the full example at the end this is used twice actually.

[flyosity]

One of the defining articles on this exact topic was written by Doug Bowman back in 2003:

http://stopdesign.com/archive/2003/09/03/absolute.html

[synnik]

Once you understand all this, you still need to KISS. Going overboard with clever CSS manipulation has two major drawbacks:

1) "Fragile" layouts, where simple changes break the entire UI.

2) Broken javascript - as an eample, jQuery-UI uses the positioning in the DOM to calculate where to display some UI elements. Mixing relative and absolute positioning breaks these functions.

[niyazpk]

IMHO 'CSS positioning 101' will not be complete without mentioning the (in)famous float property.

[sudont]

Float's aren't that bad, other than the fact that the parent element will suddenly lose any inherent height if all child elements have floats.

I've got a few friends who extol the virtues of inline-block, but my clients have viewer demographics of 70% ie6.

Hack here, if you really want inline-block with ie6: http://www.aaronrussell.co.uk/blog/cross-browser-support-for...

[kenjackson]

In general are floats now out of favor, and one should one of the layout methods listed on this page?

[ivank]

If you're interested in all of the details, the spec itself is a good read: http://www.w3.org/TR/CSS2/cover.html

Section 9, "Visual formatting model" is especially useful: http://www.w3.org/TR/CSS2/visuren.html

[joakin]

I had an AHA moment few weeks ago, when I discovered aplying something like that:

  .smth{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
  }

It beautifully solved 2 interfaces I was working on (webapps with fluid widths). I remember being smiling for 2 hours after discovering this.

Not sure about IE support though, i think its covered from IE8 and ahead

[epo]

What problem did it solve? BTW you can omit 'px'

[jianshen]

Great article to add to a FE Developer syllabus.

I've found no better way to learn these details than just opening up a text file and browser and trying out my own wacky layout experiments.

It's even more fun with other devs! Modify the CSS/HTML in different ways and take bets on how it will look before hitting refresh.

When in doubt, go back to the specs and find your explanations there! http://www.w3.org/TR/CSS21/visuren.html#propdef-position

[Tycho]

If you have an iPad, you might want to take a look at cssMachine. It lets you try out the more graphical CSS properties with intuitive controls (rather than just typing code, although you can do that too)

[simplegeek]

This is probably off-topic. But can any design gurus recommend a beginner CSS and a Photoshop book? Is site-point books any good? Thanks for the help in advance.

[gabrielroth]

For CSS, I've recommended "Learning Web Design" by Jennifer Niederst Robbins to several people. It's a bit out of date now (doesn't cover HTML5 and CSS3) but you shouldn't be learning the latest additions before you have a solid grasp of the basics anyway.

I've been unable to find a good introductory Photoshop book.

[joshfinnie]

Are people still creating custom CSS for layout? I fell in love with the grid css frameworks and haven't looked back. Looking at most of the websites that come through these parts, I'd say they have too...

Do you still write css for layout?

[ianbishop]

eh, I'll take the bait.

Whether you're using 960gs or whatever it may be, you still need to be considerate of position and "write css for layout".

If you find yourself always using grid layouts, not just as guides but as the way to lay out everything, then you will soon find yourself caged inside that grid.

[phillijw]

If only we could use this in emails