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.
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
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.
Thanks, simple and understandable.
I cannot thank you enough for you post.
Excellent Tutorial. Made me understand posiitoning better.
Wow ! – it was awesome
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!
Thanks for the clear and simple tutorial.
Suggestion: please show the HTML.
Brilliant. Much Thanks..
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…
Just amazing.. thanks for this great tutorial
You’ve explained this scaring topic in a simple yet detailed manner. Thanks a lot.
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.
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?
yeah I did learn something new – position:clear !
Hope you can get a beer for 5 bucks
Three words about your tutorial: SIMPLE, CLEAR, CORRECT
Thanks for sharing your knowledge and keep up the good work.
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.
Really, really great tut! Finally I got everrything right.
You explain things in the way that one can understand. Waiting for more tutorials!
This is the best tutorial I’ve ever seen on this subject. Thank you!
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.
Simple Amazing !!! it was never soo easy to learn !!!
Thanks for the wonderful tutorial !!!
Wow, great tutorial! I learned something new but I’m too cheap to buy you a beer:P bwahaha!! sorry lol
Very Nice article ! You will not believe how much I searched for this information. Thanks a lot !! Great work !
Very cool CSS demo. I too will be recommending this to my peers and students.
The absolute+relative part was exactly what I was looking for. Thanks so much!
its very useful learn the CSS.its saves a lot of time for Beginner.
Great!
And a suggestion: add a ref’ to browser-ver support for each step.
Yossi
Brilliant explanation on relative and absolute positioning with CSS!
Thanks
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
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 !!!
Thank you for sharing your knowledge and expertise with us. Really useful tutorials with examples. Well done.
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.
I need to that tutorial.
Is there a way to donwload it?
Thanks in advance
Simply the best tutorial on css positioning.
This puts all other tutorials on this topic I’ve seen so far to shame.
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!
You explained it in 10 easy steps what my CSS book tried to explain in 10 pages. Excellent…!!
wonderful tutorial.
wow. Best tutorial about positioning on the web.
This is compact and it’s been very helpful to me. Thanks!
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.
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