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. Tyler G says:

    Thank You Very Much.

  2. Venky says:

    Hi,

    CSS has always been very tricky to understand. I have looked at several websites, but i think u have explained very well. Want to chk it out asap on my project !

    Thanks a tonne.

    Venky

  3. Gaurav says:

    Hi,

    Nice explanation, highly useful for beginner.

    Thanks a million….
    Gaurav

  4. Yamuyel says:

    Thank you very much.

  5. Giorgos says:

    Crystal Clear!!
    Thanks!

  6. Fatih Güneş says:

    Excellent tutorial. Thank a lot !

  7. William F says:

    From a pure Java developer… Thanks so much for this tutorial. This “front end” stuff can give me a headache.

  8. Mallikarjuna Kenchappagoudra says:

    Thanks you.

    You have just clarified 1000’s doubts on CSS positioning in just 10 steps. I feel like I can do anything now using those techniques.

    Thank you

  9. Todd Cary says:

    There is one more feature that I would like to be able to do with the columns: have the one on the left go to the same height as the one on the right, so it it were blue in color, there would be a blue column all the way to the bottom.

    Can this be done with the tags?

    Todd Cary

  10. Saikat says:

    One of the best tutorial available on-line. Thanks a ton.

  11. imissmyjuno says:

    May I.. kiss you? Ever since I found it and, thankfully, bookmarked it (as I was not able to readily find it in Google again ever since), I’ve been not only using this on a regular basis but recommending it to everyone who bugs me about the topic. There is simply no other more concise and understandable way to learn about this.

    Big THANKS!

  12. Tiago Braga says:

    Good one!
    Thanks a lot…

  13. UniWeb says:

    Thanks, this helped a lot. I finally got it! *smacks his own forehead*

  14. sgk says:

    Excelent tutorial, I’ll pop a link in couple blogs blogs.. “CSS positioning” gave a search result in google.

  15. Rob says:

    Thanks! this was extremely helpful.

  16. Jordan says:

    I just started learning HTML about two months ago. I went through tutorials, and then discovered that all help forums and such advise to build towards divs and CSS. I find it easier to do, easier to read, and easier to change. The only difficulty I was having was free-handing the divs in a text document to practice, because of lack of clear explanation on divs in css. This has made it so much easier to learn and go back and check my work. Thank you so much. Rest assured you will be linked to when I get it up and running, and the revenue ads on your page will be clicked…regularly.

  17. Muditha says:

    I am really new to world of SE and i’m being a developing my first webSite.
    This simple tutorial helped me lot…. I was fed up with hw to possitioning the controls and images in my web page….
    Only this one helps me really…. not even a W3Schools…
    Thank you very much for publishing this….

  18. Neil says:

    very straightforward explanations for what can be a (sometimes) confusing topic – i picked up more on your tutorial than i did through some of the popular css books out there. keep up the good work… i look forward to anything else you might decide to provide a tutorial on.

  19. Bianca says:

    This helped me soo much. Thank you!

  20. James says:

    My hero! Your clear explanation of position:relative has helped me do in 2 minutes what I’d been struggling with for 2 whole evenings. Keep it up!

  21. dharmachick says:

    Excellent…….very simple and easy to understand. I had tried to teach newbie designers about CSS positioning, and they never quite grasped it. Your tutorial is very easy to understand, and is at the top of our bookmarks! Thanks for taking the time to compile this.

  22. Toby says:

    I found that I could have a div following the divs positioned using relative/absolute. I had a container that was relative, enclosing 2 divs that were absolute, as in the tutorial. I did not want to use float since resizing the browser window will shift the divs if they no longer fit side-by-side.
    I changed the larger of my two internal divs to use position:relative – and it works! A div following the container div will now render as expected (below the container div) and the 2 divs inside the container will be side-by-side and stay that way even when resizing the window. Sweet.
    #Container – relative
    #Left – absolute top:0 left:0 width:50
    #Right – relative top:0 left:50
    #Footer – no positioning needed

  23. Phi says:

    I had been getting confused by the language of ‘absolute’ and ‘relative’.

    I assumed a child div would be positioned ‘relative’ to an ‘absolute’ly positioned parent. Whereas I should use ‘absolute’ positioning for the child which will position it relative to the parent.

    I realise now that a third invisible element is part of this logical system which is ’static’ or ‘where the div would be if no other positioning information is applied’.

    Your 10 step tutorial broke it down into bite-size chunks and helped me get it. Many thanks.

  24. house9 says:

    great stuff!

    I never knew about the “position:relative + position:absolute” – this is very useful in certain situations

    Thanks

  25. LoneWolf says:

    Thanks for this tutorial. Step 4 was the one thing that I never really clicked into before. It makes things so much easier to understand how to do absolute within a block rather than the whole page! Your examples are simple, yet very effective. Keep up the great work!

  26. John says:

    Excellent tutorial.
    Well thought out and easy to follow.

  27. Nick says:

    thanks for the quick and dirty on positioning. These are some simple yet invaluable tools in design scenarios!

  28. Athar Bilal says:

    THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU

    You have no idea how much youve help me with this very simple definition of the position property .

    keep up the good work

  29. Mark Trotier says:

    Thanks alot, final clarity on positioning

  30. Scott says:

    Thanks, this is a great (and understandable) tutorial. As info, in tab three my div-1a stayed relative to the parent in firefox 3.0.6 . i moved the tag outside all the divs and it worked great. your example Does style correctly though.

  31. kim says:

    This was the very best explanation of this that I have ever seen. Well Done!!

  32. Mohammad says:

    the best concise tutorial in css positioning

  33. Raphael says:

    Amazing! The thing that I was justn looking for!
    Tableless site is tricky, this is a great titorial for beginners!

  34. Caitriona says:

    This is excellent. Short mathematical, logical no waffle.

  35. Naga says:

    Hi There,
    THanks for this great brief tutorial about position attribute. It just took you 10 (actually 9) mini tabs to clear the fuss around position & float properties. Kudos..

    -Naga

  36. Jason says:

    By “bugs” he means “the standard is not specific about this issue and IE works differently than my favorite browser.” Otherwise, this is great.

  37. Benjamin says:

    Brilliant!
    Thank you so very much.

  38. Dave Pawson says:

    Many thanks. good content, very clear explanation. Very much appreciated.

  39. Prakhar Srivastav says:

    Thanks a million.. the best tutorial out there….. one little suggestion though
    the background color of div after and before is a bit difficult to see….

    awesome tutorial… thank u

  40. Mathias Rost says:

    Excelent tutorial. Helped a lot!!

  41. Tushar Agarwal says:

    Hi,

    This is really a great article. I have a question though:
    I repositioned some DEV tags at run time using position:relative

    Initially this DIV tag was appearing on right side of screen creating horizontal scrollbar. Now control is moved towads left. Is there any way to reset page so that scrollbar disappear?

    Thanks,
    Tushar

  42. dAm2K says:

    Thank you so much!
    relative + absolute positioning was not clear to me, and now it is!
    Great great great. Thanks!

    Dino.

  43. GBMATE says:

    You have done a terrific job of explaining the basics of CSS! Keep up the good work!

  44. manas says:

    Great!! tips are just amazing, u have made css positioning concepts more clear…its a golden tutorial for any beginner in css..i really liked your efforts..Thanks alot!!

  45. TimJowers says:

    Need step 11 for how to do step 8 but when the divs are larger than the visable area. In this wrap. No example works for this case so far…

  46. Bill says:

    … aaammm … khmmm …
    In step 3you show how absolute positioning removes the div from the document.
    OK.
    In step 4 you show how ‘absolute’ positions the div relative to a parent if the parent was positioned as relative.

    Now:- what does ‘position’ mean?
    Is it the position of the div or the position of the contents of the div?

    in step 3 the following code POSITIONS THE DIV ITSELF:
    #div-1a {
    position:absolute;
    top:0;
    right:0;
    width:200px;
    }

    In step 4 the code under #div-1 POSITIONS THE CONTENT and the code under #div-1a POSITIONS THE DIV ITSELF.

    #div-1 {
    position:relative;
    }
    #div-1a {
    position:absolute;
    top:0;
    right:0;
    width:200px;
    }

    This is an absolutley confusing and frustrating issue.
    The guys who invented the html and css syntaxt should be burnt at the stake. Slowly. Very slowly.

    UniWeb:
    Don’t “*smacks his own forehead*”. Not your mistake.
    It is the mistake of those who developed a confusing syntax and did not developed a clear manual for it. (How do you develop a clear manual for a confusing issue??)

    The number of ‘thanks’ here is the indication just how bad the syntax is and how widespred the problem is.

    We should start forming a group and coming down on the people who steal our sanity.

  47. I finally figured out how to get my divs aligned using float. I was using relative positioning before and it wasn’t showing up the same way in all the browsers and there was empty white space where the div would normally be. Thanks so much.

  48. Ron Smith says:

    Best div positioning tutorial I’ve seen… this really helped me… thank you!

  49. Dan says:

    this is the clearest tutorial on positioning I have ever seen, thanks

  50. Noah Bako says:

    Thanks man, this is a very helpful tutorial that teaches in the simplest way. God bless you for putting in the time and effort in doing something like this.

Leave a Reply