Question

I have gone through a long tutorial on W3Schooles to learn CSS; I learnt some basics but still miss my primary aim: Positioning DIVs

This is what I’m trying to do

*---------*---------*
*         *         *
*         *         *
*---------*---------*

My goal is simple and trivial for some, but I’m having headaches doing this the right way, in fact I did it but it has lot of problems when I add more text to the DIVs or they simply merge with another DIVs

What I did is simply play with margin and padding values using FireBug. All I need now is to learn me this simple (I hope) trick, what I’m missing is: how this simple positioning works? Shall I use absolute, relative positioning? Change the margin, the padding, the size??

If you have a good tutorial explaining this point, so please point it. I had other headaches looking for that on Google.

Answer 1

It looks like you are trying to float two columns next to each other. This is fairly simple and covered in depth here :

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

I tend to stay away from the position property unless I have to overlay some elements.