5 ms·

CSS Positioning 101

190 points by duck 16y ago

ivank 16y ago
If you're interested in all of the details, the spec itself is a good read: http://www.w3.org/TR/CSS2/cover.html http://www.w3.org/TR/CSS2/cover.html Section 9, "Visual formatting model" is especially useful: http://www.w3.org/TR/CSS2/visuren.html http://www.w3.org/TR/CSS2/visuren.html
jianshen 16y ago
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 http://www.w3.org/TR/CSS21/visuren.html#propdef-position
- Tycho 16y ago
  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)
niyazpk 16y ago
IMHO 'CSS positioning 101' will not be complete without mentioning the (in)famous float property.
- deleted 16y ago
  [deleted]
- sudont 16y ago
  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-inline-block/ http://www.aaronrussell.co.uk/blog/cross-browser-support-for...
  - oneplusone 16y ago
    If you set overflow to auto on the parent element it will retain its height.
    - sudont 16y ago
      Excellent. Thanks for the tip!
    - mikeklaas 16y ago
      I usually put a <div style="clear:both"></div> after the floats to fix that.
    - sosuke 16y ago
      I just tested it because it sounded so beautiful but that does not work in IE6 unfortunately.
      - isleyaardvark 16y ago
        It has worked for me. Does the container have hasLayout?
    - boundlessdreamz 16y ago
      You also need to set the width. Explanation here http://www.quirksmode.org/css/clearing.html http://www.quirksmode.org/css/clearing.html
      - DanielRibeiro 16y ago
        Quirksmode does an excelent job explaining this. And covering ie/chrome/safari bugs adds extra credit.
- kenjackson 16y ago
  In general are floats now out of favor, and one should one of the layout methods listed on this page?
Huppie 16y ago
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/positioning/ http://www.barelyfitz.com/screencast/html-training/css/posit...
- bantic 16y ago
  I like this one a lot. Simpler CSS, less verbose, and the in-context visual examples make it a lot easier to follow along.
- AlexC04 16y ago
  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.
krosaen 16y ago
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 16y ago
  In the full example at the end this is used twice actually.
  - krosaen 16y ago
    ah, good point, "Our #callout element is set to position: absolute, and since its parent element, #content is set to relative, the offset properties we’re using on #callout are based off the coordinates created by #content." would be nice to see it called out as one of the core techniques above though. or I guess I could have just read the whole article before commenting :)
  - jjcm 16y ago
    Still though, when they're explaining absolute positioning they make this statement: "You can set an element to top: 100px and left: 200px; and that element will sit exactly 100px from the top and 200px from the left of the document." Which seems misleading, despite the example they show later.
- flyosity 16y ago
  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 http://stopdesign.com/archive/2003/09/03/absolute.html
joshfinnie 16y ago
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 16y ago
  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.
  - weego 16y ago
    This is exactly it. The move away from tables had the side benefit of being able to move away from row and column thinking (there will always be an underlying grid in good design, but breaking it is where a good designer really adds value). If you don't stick with the grid the framework provides you are just writing custom CSS anyway, at which point you probably wonder why you have another CSS file with lots of code that you are only using 50% of the time and that comes with it's own maintenance issues that you don't need. I would also argue that from a maintanence point of view, semantically smart class and id names make it much easier to work with compared with a page full of "r3 w50 h10" type attribute properties. To stick my flag to the mask, I hate CSS "frameworks" with something of a mild passion. CSS is too domain (domain in this sense I guess is a synonym for project) specific and abstract to benefit from a framework, you are much better keeping it lean and tidy and owning every line you write, because CSS is the kind of language where you should justify every line to yourself.
    - syaz1 16y ago
      Good points. However I have to say I love frameworks (compass?) that handle all the cross-browser / ie6 stuff for me. If that is not reason enough to use CSS frameworks, I don't know what is.
simplegeek 16y ago
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 16y ago
  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.
joakin 16y ago
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 16y ago
  What problem did it solve? BTW you can omit 'px'
  - joakin 16y ago
    I wanna cry, i had been writing a beautiful comment with examples, explanations, divagations, and when i was done i hit ctrl+R out of habit from developing. I really wanna cry... Please implement a cookie based autosave for comment forms :'( Briefing of my hardworked comment that will never be read: ----------------------------------- I know about the px thing. Fluid interfaces and traditional box model are wrong because padding and border mess things up You cant substract % - px, and % in width and height is calculated without taking in account border and padding. I gave an example (wont rewrite it again) I gave a few solutions: * extra markup inside the boxes with % ( ex. div.absolute>div.padding20>content ) Ugly and unsemantic, but usable * using positioning top/bottom and left/right for defining widths and heights This only works if you define boths of properties, anyway else if you specify width/height with padding/border it screws you * use new CSS3 box-sizing property Not compatible in all browsers, but maybe the best option thinking to future Links to ilustrate: Traditional box model http://www.w3schools.com/css/css_boxmodel.asp http://www.w3schools.com/css/css_boxmodel.asp Optional box models http://www.w3.org/TR/css3-ui/#box-sizing http://www.w3.org/TR/css3-ui/#box-sizing I also said that a webapp like google calendar would benefit from this things, right now in chrome it gives me 2 scrollbars on the right side, one for the body and another one for the calendar pane. Uh and heights is crappy because an element only expands to 100% height if parent is 100% height, anyway else it doesnt do shit. This is pain in the ass, redundant and messy between browsers. Better option is to specify each box coordinates and anchors (and subsequently width and heigth) with position absolute top/left/right/bottom and then define padding without having troubles. If somebody asks more i will jsfiddle some examples
synnik 16y ago
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.
phillijw 16y ago
If only we could use this in emails

190 points by duck 16y ago

ivank 16y ago

If you're interested in all of the details, the spec itself is a good read: http://www.w3.org/TR/CSS2/cover.html http://www.w3.org/TR/CSS2/cover.html Section 9, "Visual formatting model" is especially useful: http://www.w3.org/TR/CSS2/visuren.html http://www.w3.org/TR/CSS2/visuren.html

jianshen 16y ago

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 http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Tycho 16y ago
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)

niyazpk 16y ago

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

deleted 16y ago
[deleted]
sudont 16y ago
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-inline-block/ http://www.aaronrussell.co.uk/blog/cross-browser-support-for...
- oneplusone 16y ago
  If you set overflow to auto on the parent element it will retain its height.
  - sudont 16y ago
    Excellent. Thanks for the tip!
  - mikeklaas 16y ago
    I usually put a <div style="clear:both"></div> after the floats to fix that.
  - sosuke 16y ago
    I just tested it because it sounded so beautiful but that does not work in IE6 unfortunately.
    - isleyaardvark 16y ago
      It has worked for me. Does the container have hasLayout?
  - boundlessdreamz 16y ago
    You also need to set the width. Explanation here http://www.quirksmode.org/css/clearing.html http://www.quirksmode.org/css/clearing.html
    - DanielRibeiro 16y ago
      Quirksmode does an excelent job explaining this. And covering ie/chrome/safari bugs adds extra credit.
kenjackson 16y ago
In general are floats now out of favor, and one should one of the layout methods listed on this page?

Huppie 16y ago

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/positioning/ http://www.barelyfitz.com/screencast/html-training/css/posit...

bantic 16y ago
I like this one a lot. Simpler CSS, less verbose, and the in-context visual examples make it a lot easier to follow along.
AlexC04 16y ago
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.

krosaen 16y ago

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 16y ago
In the full example at the end this is used twice actually.
- krosaen 16y ago
  ah, good point, "Our #callout element is set to position: absolute, and since its parent element, #content is set to relative, the offset properties we’re using on #callout are based off the coordinates created by #content." would be nice to see it called out as one of the core techniques above though. or I guess I could have just read the whole article before commenting :)
- jjcm 16y ago
  Still though, when they're explaining absolute positioning they make this statement: "You can set an element to top: 100px and left: 200px; and that element will sit exactly 100px from the top and 200px from the left of the document." Which seems misleading, despite the example they show later.
flyosity 16y ago
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 http://stopdesign.com/archive/2003/09/03/absolute.html

joshfinnie 16y ago

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 16y ago
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.
- weego 16y ago
  This is exactly it. The move away from tables had the side benefit of being able to move away from row and column thinking (there will always be an underlying grid in good design, but breaking it is where a good designer really adds value). If you don't stick with the grid the framework provides you are just writing custom CSS anyway, at which point you probably wonder why you have another CSS file with lots of code that you are only using 50% of the time and that comes with it's own maintenance issues that you don't need. I would also argue that from a maintanence point of view, semantically smart class and id names make it much easier to work with compared with a page full of "r3 w50 h10" type attribute properties. To stick my flag to the mask, I hate CSS "frameworks" with something of a mild passion. CSS is too domain (domain in this sense I guess is a synonym for project) specific and abstract to benefit from a framework, you are much better keeping it lean and tidy and owning every line you write, because CSS is the kind of language where you should justify every line to yourself.
  - syaz1 16y ago
    Good points. However I have to say I love frameworks (compass?) that handle all the cross-browser / ie6 stuff for me. If that is not reason enough to use CSS frameworks, I don't know what is.

simplegeek 16y ago

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 16y ago
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.

joakin 16y ago

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 16y ago
What problem did it solve? BTW you can omit 'px'
- joakin 16y ago
  I wanna cry, i had been writing a beautiful comment with examples, explanations, divagations, and when i was done i hit ctrl+R out of habit from developing. I really wanna cry... Please implement a cookie based autosave for comment forms :'( Briefing of my hardworked comment that will never be read: ----------------------------------- I know about the px thing. Fluid interfaces and traditional box model are wrong because padding and border mess things up You cant substract % - px, and % in width and height is calculated without taking in account border and padding. I gave an example (wont rewrite it again) I gave a few solutions: * extra markup inside the boxes with % ( ex. div.absolute>div.padding20>content ) Ugly and unsemantic, but usable * using positioning top/bottom and left/right for defining widths and heights This only works if you define boths of properties, anyway else if you specify width/height with padding/border it screws you * use new CSS3 box-sizing property Not compatible in all browsers, but maybe the best option thinking to future Links to ilustrate: Traditional box model http://www.w3schools.com/css/css_boxmodel.asp http://www.w3schools.com/css/css_boxmodel.asp Optional box models http://www.w3.org/TR/css3-ui/#box-sizing http://www.w3.org/TR/css3-ui/#box-sizing I also said that a webapp like google calendar would benefit from this things, right now in chrome it gives me 2 scrollbars on the right side, one for the body and another one for the calendar pane. Uh and heights is crappy because an element only expands to 100% height if parent is 100% height, anyway else it doesnt do shit. This is pain in the ass, redundant and messy between browsers. Better option is to specify each box coordinates and anchors (and subsequently width and heigth) with position absolute top/left/right/bottom and then define padding without having troubles. If somebody asks more i will jsfiddle some examples

synnik 16y ago

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.

phillijw 16y ago

If only we could use this in emails