Learn CSS positioning in ten steps

CSS positioning

Here’s an interactive tutorial I’m working on:

Learn CSS Positioning in ten steps

I’m using it to give some CSS and HTML training today. It uses a customized version of my JavaScript tabs interface and triggers a styleswitcher each time you switch tabs, so you can see the CSS change right on the page.

It’s a work in progress, so let me know if you have any suggestions.

141 Responses to “Learn CSS positioning in ten steps”

  1. Chris says:

    It would be nice if we could exec a function on the change of a Tab View State

  2. pat says:

    Yep, I’ll be adding that soon to the tabber code.

  3. mat says:

    FYI, on Safari 1.3.2 (Mac OS X, 10.3.9) div-1a on tab 4 does not show, perhaps it is “under” the others. On same machine, looks okay on firefox.

  4. RickyF says:

    This is a nice, easy introduction to a basic web design topic. It helps us all. Thank you.

  5. Mauricio says:

    I love how some people are so didatic! :)
    thanks

  6. Thank you so much for putthing this together. This has to be by far the best incremental and compare/contrast tutorial on positioning. You’ve provided much clarity and solved a number of annoyances I’ve long been having. Thank you, thank you, thank you.

  7. Anon says:

    tab 6 shows what should not be done ever.
    it will not fit in any design at all, considering the ability of the user to dramatically change text-size. see point 3 of
    http://www.pingmag.jp/2006/03/23/8-web-design-warm-fuzzy-feelings/

  8. pat says:

    “tab 6 shows what should not be done ever”

    For that particular example, you are correct, since there is a variable amount of text; however, there are many occasions where you can use absolute positioning effectively. The purpose of these slides is to guide the user through understanding the positioning options (and the rationale for choosing which option to use). In most cases you’ll want to use floats, but absolute positioning is essential in certain situations.

  9. John says:

    Tab 7. Something is missing. What is the code on id = div-1b? Mine never seems to wrap. Nice an simple stuff otherwise – thanks.

  10. Uzair says:

    Excellent, excellent.

  11. Amrit says:

    Hmmm…I like the way the tutorial has been presented using CSS based tabs :-)

  12. greengnn says:

    good tutorial~~~*_*

  13. Navin says:

    Cool demo!!! Made a lot of CSS positioning concepts clear for me

  14. Natasha says:

    This has been extremely helpful. I’m new to CSS positioning and most sites onl talk about absolute and relative positioning. The float and clear have been extremely handy for the site I’m working on.

    THANKS!

  15. steve says:

    thanks for the easy to understand tutorial.

    i have been sending my designers here and it seems to help them get started pretty quickly!

  16. JDream says:

    Thanks. This site truly stands out among the rest which only mentions about relative and absolute positioning but not really giving clear explanations on both and how it works.

    I’m new to the concept of designing via CSS and I must say I’m more clear now on how it works.

  17. Elliot Crosby-McCullough says:

    The incremental nature of the tutorial (plus a few hints that had been thrown my way previously) did more to explain how to position properly using CSS than a month or two of actually trying to do it.

    I think this has caused me to “get” positioning in CSS and only took about 20 seconds to do. For that I thank you.

  18. vincent says:

    Very clear explanation. I now can understand what they said in the CSS2 spec about abolute/relative positioning. Thanks

  19. Mossy says:

    Finally, a straightforward explanation of CSS positioning. Thanks.

  20. Bauke says:

    Some bug in IE causes relative-block to be seen as a static-block by child objects. This happens when the width of that block is not set. This isn’t mentioned in the tutorial, but it did cost me quite some time to figure this out.

    Something else: the use of margin and padding can also be very handy for positioning, because an element with {left:20%; width: 60%} isn’t perfectly centered. But in that case you shouldn’t forget to make an inner block with width set to 100% and position to relative to make absolute positioning work the way it should in IE.

  21. reZo says:

    Very nice. I finally learned what relative positioning really is. It was something I’ve been confused over for a while now.

    You have explained the definitions well, nice work!

  22. Justin says:

    Thank you!!! this tutorial is perfect!! Very simple and to the point. This was better than any other resources I could find on line.

  23. Cagdas says:

    Great tutorial!! Thanks!

  24. gzip says:

    Nice tutorial by example. But why leave out position fixed?

  25. John K. Wayne says:

    is a powerful addition to html but confusing. This tutorial really helped me understand how to make things work.

  26. JJ says:

    One of the best simple guides and explainations of CSS positioning

    Thanks

    JJ

  27. Pepe says:

    This is a great tutorial.Thanks

  28. Superb thanks.

    I’m new to CSS and positioning has messed with my head for ages. This was sweet – learned more about positioning in 10 minutes than the past few days of trawling Google.

    Thanks again,
    CM.

  29. Kiran says:

    Hey Man,
    Thank you for the clear examples. You saved a lot of pain and time for me.

    Thanks again.

    -Surya kiran

  30. CSS relative + absolute positioning

    In my work I use a lot of CSS and one of the things I always hate about CSS is trying to get things positioned exactly where you want it. Yesterday I came across this website that clearly explains the differences between a couple of layout properties. …

  31. Christiaan says:

    Thanks for the clear overview. I especially liked the 4th example since that’s one of the more hidden tricks of CSS. I think that if something like position:absolutefromparent would exist it would be more logical.

  32. Volker Englisch says:

    Excellent! This little tutorial is clear and very well presented.
    I have now a much better understanding on how to use the position attribute.
    Thank you!

  33. Morten says:

    Thanks a lot! “4. position:relative + position:absolute” saved my day!

    :-)

    Morten

  34. Ekram says:

    i should say fantastic. it is absolutely read-less learn-more mode. bookmarked for reference. Take special thanks form deep of my heart for the effort.
    – Ekram

  35. Michal M says:

    I did tested tab4.
    In absolute divs top and left/right property must be used with XXpx rather then just XX (where XX is a number).
    tested on FF2.0.x and IE6.x

  36. Wilfred K says:

    Thanks so much, i didnt know how to use the property clear on css positioning. It just solved for me so many problems. I used to use tables but now waoo am kul!

    Keep up the good work
    God Bless

  37. bevontheroad says:

    for a newbie that’s been scanning the web now for about 8 hours, I haven’t found ANYthing as helpful as this. I can NOT thank you enough.

  38. Lamis says:

    Thanks so much pal, I ALWAYS had problem with positioning. now I really got to understand it very well. you really dont know how much I’m thankful.
    Thanks again!!

  39. byakugan360 says:

    I loved the examples and the way you presented them. However I ran into an issue with example 5 and the examples that build off of it.

    When I try example 5, div-1b overlaps div-1a since they are both using the same coordinates for absolute positioning that is relative to div-1. However, the example in the page shows that div-1b is on the left side of div-1a which, from the way you described absolute positioning doesn’t match up.

    Could you please explain what I’m doing wrong?
    Thanks!

  40. johnrobin says:

    a good article… but i still wondering of using css for variable tabular data instead of table tag. let’s say i have a photo album which the number of photos is variable… it has 3 columns layout and the number of rows is changeable depends on the photo entry… I’ve made one but there is inconsistency of cell which is blank (no data) on in between other cells.. is there any solution?

  41. Andrew says:

    Nice! It’s quick, it’s to the point, and it’s in-depth enough to help in a pinch.

  42. Srinivas says:

    Thanks a lot; I struggled so hard to keep two divs adjacent to each other before coming across this tutorial. Thanks again.

  43. surinder saini says:

    Awesome!
    Believe me, I never came across such a precise and concise article before.

  44. Yiyi Wang says:

    love this! much simpler and cross brower way of laying out

  45. joe says:

    brilliant, simple now i get it!!!!!!!!!

  46. Eric says:

    Very nicely explained. Answered my questions immediately.

  47. Eyad says:

    Amazing!! I’ve been alwyas puzzled by css positioning. everything is now clear.
    thanks a million.

  48. Richa says:

    Thanks! CSS positioning always confuses me. now, I am clear. It is simple to understand

  49. Caribbean Hatch says:

    Simple, graphic, perfect!

    ¬°Gracias amigo!

Leave a Reply