How to put a lot of divs in CSS

Question

I read a long tutorial on W3Schooles to learn CSS; I learned some basics, but still don't see my main goal: Positioning DIVs

This is what I'm trying to do.

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

My goal is simple and trivial for some, but I have headaches doing it the right way , I actually did it, but I have a lot of problems when I add more text to DIVs or they just merge with other DIVs

What I did was just play with fields and padding values ​​using FireBug. Now I just need to learn this simple (I hope) trick, which I miss: how does this simple positioning work? Should I use absolute relative positioning? Change margin, fill, size

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

Answer 1

It looks like you are trying to move two columns next to each other. It is quite simple and detailed here:

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

I try to stay away from the position property unless I need to overlay some elements.

Answer 2

Creating a two-column layout in CSS

Personally, I don't like to use clear: both in the br tag.

Use overflow: auto instead of parent div

<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

, 960 grid system.

- , . , , - IE. ( )

Answer 4

div. , , .

, , . , , .

Answer 5

div, :

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

"float: left" causes the columns to be aligned side by side. The last div (with a clear: both) makes sure that everything you put after the columns is below the columns. Thus, you can change the width of any column without entering the style of another.

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>