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. lightinthedark says:

    Hi,
    I know it’s an old thread, but still getting attention from people and Google. Thought it would be worth mentioning this:

    http://www.quirksmode.org/css/clearing.html

    In summary, when doing floating columns (as on page 8 / 9) you can get the clearing effect by setting “overflow: auto” on div 1 rather than including a separate clearing div. This gives less non-semantic markup, and means that if you don’t want a blank line of space between one set of floating columns and another you don’t have to worry about making the clearing div have zero height. Hope that helps someone.

    Hello
    :-Lightinthedark

  2. pat says:

    In my experience, overflow:auto has the annoying habit of causing a scrollbar to appear when you least expect it, so I don’t use that technique in most situations.

  3. Thanks, simple and understandable.

  4. Denis says:

    I cannot thank you enough for you post.

  5. Jonah says:

    Excellent Tutorial. Made me understand posiitoning better.

  6. Sam says:

    Wow ! – it was awesome

  7. Doug says:

    Thank you! This really cleared up a TON and helped me make some stuff I’ve been doing MUCH easier to understand and CLEANER to design… hats off!

  8. simoncpu says:

    Thanks for the clear and simple tutorial.

    Suggestion: please show the HTML.

  9. Vishwanath says:

    Brilliant. Much Thanks..

  10. Hammad says:

    You have already been thanked so many times for your work… here goes once more…

    Explaining all of these confusing bits togethor do sure explains the purpose/use of these and how we can play with them to get what we want.

    Thanks loads…

  11. Anurag says:

    Just amazing.. thanks for this great tutorial

  12. Gouri says:

    You’ve explained this scaring topic in a simple yet detailed manner. Thanks a lot.

  13. Agustin says:

    You absolutely saved my week !!!
    thanks a lot, this really cleared all my doubts.
    coming from tables and flash CSS is clean and beautifull but a pain to learn.

  14. Emmbec says:

    Hi, thanks for your tutorial it really helped me out. I have just one question, in example 9, is it possible to have the last div(1c) to be right below the first div (1a), and have the second div(1b) still next to the first and thir divs?

  15. Toby1 says:

    yeah I did learn something new – position:clear !

    Hope you can get a beer for 5 bucks

  16. Sudhanshu says:

    Three words about your tutorial: SIMPLE, CLEAR, CORRECT
    Thanks for sharing your knowledge and keep up the good work.

  17. Vishal says:

    I haven’t gone through all the steps yet but I know this is the explanation I had been looking for all this while. Thanks a lot! Great work.

  18. Ann says:

    Really, really great tut! Finally I got everrything right.
    You explain things in the way that one can understand. Waiting for more tutorials!

  19. Andrew says:

    This is the best tutorial I’ve ever seen on this subject. Thank you!

  20. Saro says:

    Your info is great. Your coding is pretty cool. However, the cute tabbing & style switching detracts from the ability to easily see what’s going on with the css.

  21. Rupesh says:

    Simple Amazing !!! it was never soo easy to learn !!!
    Thanks for the wonderful tutorial !!!

  22. Chris says:

    Wow, great tutorial! I learned something new but I’m too cheap to buy you a beer:P bwahaha!! sorry lol

  23. Kumar says:

    Very Nice article ! You will not believe how much I searched for this information. Thanks a lot !! Great work !

  24. jules manson says:

    Very cool CSS demo. I too will be recommending this to my peers and students.

  25. Dane says:

    The absolute+relative part was exactly what I was looking for. Thanks so much!

  26. Suresh says:

    its very useful learn the CSS.its saves a lot of time for Beginner.

  27. Yossi B says:

    Great!

    And a suggestion: add a ref’ to browser-ver support for each step.

    Yossi

  28. Paula says:

    Brilliant explanation on relative and absolute positioning with CSS!
    Thanks

  29. Lee says:

    Hi Patrick
    This is great tutorial and has help me solved half of a problem I could never get the difference between relative and absolute, now I know how to apply them.

    Now for the other half of my problem I have two divs floated left, I would like to know how you would go about positioning both of them in the center of the parent div without having to make fixed calculations.

    this is what I have and it does work but there must be a better way I just cannot figure it out, would you be so kind to point me in the right direction?

     

     

    many thanks

    Lee

  30. Jon M. says:

    You made my month !! FINALLY I UNDERSTAND CSS DIV POSITIONING !! “The absolute+relative part was exactly what I was looking for. Thanks so much!” – same here !!! You are the best. I will be buying you a beer !!!

  31. Zdenek says:

    Thank you for sharing your knowledge and expertise with us. Really useful tutorials with examples. Well done.

  32. Stefan Tax says:

    I’m veru grateful abou the part 4 position:relative + position:absolute.
    This is the first time I saw how nested div’s work on each other.
    However, if you want to attach a background-image to the containing div (with position: relative) it is important to give the containing div height, otherwise all the contained div’s do not make up any height, and the background disappears.

  33. I need to that tutorial.

    Is there a way to donwload it?

    Thanks in advance

  34. Sam says:

    Simply the best tutorial on css positioning.
    This puts all other tutorials on this topic I’ve seen so far to shame.

  35. Andrew says:

    The most simple, concise example of positioning on the internet I have come across. Thank you SO much for this. Everything that was so hazy before has become crystal clear!

  36. mikeyatesusa says:

    You explained it in 10 easy steps what my CSS book tried to explain in 10 pages. Excellent…!!

  37. devin legolas says:

    wonderful tutorial.

  38. Leigh says:

    wow. Best tutorial about positioning on the web.

  39. LittleDanniel says:

    This is compact and it’s been very helpful to me. Thanks!

  40. This is one of the best tutorials I have ever seen, nor complex, clear and even in a basic way tells you a lot.

    I wanna thank your honest job.

  41. Doug says:

    Best explanation ever. I learned a trick I never understood before from this post- you can use absolute positioning inside relative positioning. I comment rarely but this is HUGE! It’s like you are the only css writer that is clued in to this great capability.

    There are so many people posting meaningless css tutorials and cluttering the internet with useless relative positioning examples. You have posted a fantastic tutorial with real world examples. Good on you!
    Just sent you a drink via paypal :)

Leave a Reply