get two divs to align in the same line

[jaycastr]

i know this is a common question but i didnt understand how ppl fixed it

i have 3 divs that each contain a table . they are both in a 4th div

i want one div(table2) to line up to the left and the other div(table3) to line up to the right but start on the same line. i also need a 3rd div(table1) to line up in the center above the 2 other. im am so lost please help

<div id='container'>
    
    <div id='table1'>
    </div>

    <div id='table2'>
    </div>
    
    <div id='table3'>
    </div>

</div>

thanks in advanced

[ko ko]

Try this:

.table2 {
    float: left;
    width: 200px;
}
.table3{
    float: right;
    width: 200px;
}
.table1{
    margin-left: 200px; /* requires at least table2 width */
    margin-right: 200px; /* requires at least table3 width */
}

[DriftingSteps]

First of all, you have to define the widths of the classes ".table1, .table2 and .table3" and float ".table2" and "table3" to their respective sides, just like Zero has showed above.
As for ".table1", I'd suggest you to do the following -

.table1 {
    width:200px; /* width depends */
    margin:0 auto; /* brings the div to the center of the page */
}

The code I gave above is useful (imo) even if the width of "#container" is defined or not. It brings the div of class ".table1" to the center, while ".table2" is floated to left and ".table3" is floated to right. BUT, the width of the "#container" shouldn't be less than the width of ".table2" and ".table3" summed up.

But, to use the code Zero has provided above, you'll have to define the width of "#container" to 600px to get the div of class ".table1" to the center. If the width is lesser or greater than 600px, then the divs will either stack up one above another, or ".table1" div won't be exactly at the center of the other two.

Hope this helped.

[sagive]

Another sure way is to use Zero13 Code and add after table1 <br style="clear: both;" />

[matricol]

give them both float:left