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.

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.

Answer 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>

Answer 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)

Answer 4

With absolute positioning you can absolutely place any of your div's. the drawback being that they are stuck in those positions no matter the resolution or the size of the window displaying your page.

What you could do is float your left column to the left, and then not specify floating on the right column. Keep the default positioning by not specifying absolute nor relative, then just adjust the widths of the elements as needed.

Answer 5

If you are okay with setting specific widths on your divs, the following has worked well for me:

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

The "float: left" makes the columns line up side-by-side. The last div (with the clear: both) makes it so that anything you put after the columns stays below the columns. This way, you can change the width of either column without messing with the styling of the other.

Answer 6

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>