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.
Thank You Very Much.
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
Hi,
Nice explanation, highly useful for beginner.
Thanks a million….
Gaurav
Thank you very much.
Crystal Clear!!
Thanks!
Excellent tutorial. Thank a lot !
From a pure Java developer… Thanks so much for this tutorial. This “front end” stuff can give me a headache.
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
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
One of the best tutorial available on-line. Thanks a ton.
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!
Good one!
Thanks a lot…
Thanks, this helped a lot. I finally got it! *smacks his own forehead*
Excelent tutorial, I’ll pop a link in couple blogs blogs.. “CSS positioning” gave a search result in google.
Thanks! this was extremely helpful.
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.
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….
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.
This helped me soo much. Thank you!
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!
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.
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
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.
great stuff!
I never knew about the “position:relative + position:absolute” – this is very useful in certain situations
Thanks
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!
Excellent tutorial.
Well thought out and easy to follow.
thanks for the quick and dirty on positioning. These are some simple yet invaluable tools in design scenarios!
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
Thanks alot, final clarity on positioning
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.
This was the very best explanation of this that I have ever seen. Well Done!!
the best concise tutorial in css positioning
Amazing! The thing that I was justn looking for!
Tableless site is tricky, this is a great titorial for beginners!
This is excellent. Short mathematical, logical no waffle.
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
By “bugs” he means “the standard is not specific about this issue and IE works differently than my favorite browser.” Otherwise, this is great.
Brilliant!
Thank you so very much.
Many thanks. good content, very clear explanation. Very much appreciated.
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
Excelent tutorial. Helped a lot!!
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
Thank you so much!
relative + absolute positioning was not clear to me, and now it is!
Great great great. Thanks!
Dino.
You have done a terrific job of explaining the basics of CSS! Keep up the good work!
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!!
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…
… 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.
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.
Best div positioning tutorial I’ve seen… this really helped me… thank you!
this is the clearest tutorial on positioning I have ever seen, thanks
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.