Learn CSS positioning in ten steps
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.
March 29th, 2006 at 1:16 pm
It would be nice if we could exec a function on the change of a Tab View State
March 29th, 2006 at 1:21 pm
Yep, I’ll be adding that soon to the tabber code.
March 30th, 2006 at 12:25 am
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.
March 30th, 2006 at 6:10 am
This is a nice, easy introduction to a basic web design topic. It helps us all. Thank you.
March 30th, 2006 at 6:46 am
I love how some people are so didatic!
thanks
March 30th, 2006 at 8:27 am
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.
March 30th, 2006 at 8:44 am
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/
March 30th, 2006 at 8:56 am
“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.
March 30th, 2006 at 4:09 pm
Tab 7. Something is missing. What is the code on id = div-1b? Mine never seems to wrap. Nice an simple stuff otherwise - thanks.
March 31st, 2006 at 9:47 am
Excellent, excellent.
April 1st, 2006 at 4:42 am
Hmmm…I like the way the tutorial has been presented using CSS based tabs
April 4th, 2006 at 11:47 pm
good tutorial~~~*_*
April 19th, 2006 at 12:41 am
Cool demo!!! Made a lot of CSS positioning concepts clear for me
April 23rd, 2006 at 11:53 am
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!
April 23rd, 2006 at 1:32 pm
thanks for the easy to understand tutorial.
i have been sending my designers here and it seems to help them get started pretty quickly!
July 3rd, 2006 at 10:59 pm
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.
August 16th, 2006 at 10:14 am
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.
March 19th, 2007 at 3:17 pm
Very clear explanation. I now can understand what they said in the CSS2 spec about abolute/relative positioning. Thanks
March 20th, 2007 at 5:18 pm
Finally, a straightforward explanation of CSS positioning. Thanks.
April 8th, 2007 at 10:21 am
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.
May 28th, 2007 at 11:55 pm
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!
June 11th, 2007 at 1:21 pm
Thank you!!! this tutorial is perfect!! Very simple and to the point. This was better than any other resources I could find on line.
July 11th, 2007 at 3:28 pm
Great tutorial!! Thanks!
August 4th, 2007 at 12:31 am
Nice tutorial by example. But why leave out position fixed?
August 13th, 2007 at 2:05 pm
is a powerful addition to html but confusing. This tutorial really helped me understand how to make things work.
August 14th, 2007 at 9:40 am
One of the best simple guides and explainations of CSS positioning
Thanks
JJ
August 19th, 2007 at 2:24 pm
This is a great tutorial.Thanks
August 20th, 2007 at 8:48 am
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.
September 3rd, 2007 at 1:29 am
Hey Man,
Thank you for the clear examples. You saved a lot of pain and time for me.
Thanks again.
-Surya kiran
September 7th, 2007 at 6:36 am
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. …
September 7th, 2007 at 6:53 am
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.
October 17th, 2007 at 12:22 pm
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!
October 25th, 2007 at 7:23 am
Thanks a lot! “4. position:relative + position:absolute” saved my day!
Morten
October 29th, 2007 at 4:09 am
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
November 1st, 2007 at 3:32 am
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
November 1st, 2007 at 7:04 am
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
November 14th, 2007 at 7:42 pm
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.
December 12th, 2007 at 5:14 am
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!!
January 3rd, 2008 at 3:39 pm
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!
January 3rd, 2008 at 9:34 pm
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?
February 14th, 2008 at 10:42 am
Nice! It’s quick, it’s to the point, and it’s in-depth enough to help in a pinch.
February 26th, 2008 at 5:36 am
Nice tute.
March 3rd, 2008 at 12:41 pm
Thanks a lot; I struggled so hard to keep two divs adjacent to each other before coming across this tutorial. Thanks again.
March 27th, 2008 at 7:04 pm
love this! much simpler and cross brower way of laying out
March 28th, 2008 at 10:59 am
brilliant, simple now i get it!!!!!!!!!
April 8th, 2008 at 1:56 pm
Very nicely explained. Answered my questions immediately.
April 9th, 2008 at 8:04 am
Amazing!! I’ve been alwyas puzzled by css positioning. everything is now clear.
thanks a million.
April 23rd, 2008 at 10:22 am
Simple, graphic, perfect!
¡Gracias amigo!
May 11th, 2008 at 3:55 pm
Thank You Very Much.
May 13th, 2008 at 8:29 pm
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
May 21st, 2008 at 1:19 am
Hi,
Nice explanation, highly useful for beginner.
Thanks a million….
Gaurav