How to position many DIVs in CSS

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.

Solution 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.

Solution 2

Creating a 2 column layout in CSS

Personally, I don't like using a clear:both on a br tag.

Use overflow: auto on the parent div instead

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

Solution 3

I've had good luck emulating the code found in the 960 grid system.

The right way is hard because many things aren't really cross browser compatible. Browsers are getting better, but its still a nightmare if you have to use anything IE compatible. (lots of hacks)

Comments

[Artem Shmatkov]

what's class "container" and what does overflow mean?

[Admin]

You could do away with : <br style="clear:both" /> by just putting "overflow: hidden" in your #container div style. You shouldn't cater your HTML code for CSS. :)

[Jon Winstanley]

'Container' is just a name given to the box which contains the columns so that you can style it. Overflow is a CSS property that governs how a box behaves when it's content overflows.