How would I use floats to float three columns

How would I float these divs underneath the top div yet side by side (float1, float2, float3)

<div id="top" style="float:left; width:900px;">

<div id="float1" style="width:130px; height:600px;"></div>
<div id="float3" style="width:90px; height:600px;"></div>
<div id="float2" style="width:720px; height:600px;"></div>

</div>

Code (markup):

Thanks.

 

The three divs are contained inside the top div; what do you mean you want them underneath it?

 

Sorry I meant this.

<div id="wrapper" style="width:900px;">

<div id="top" style="float:left; width:900px; height:200px;"></div>
<div id="float1" style="width:130px; height:600px;"></div>
<div id="float3" style="width:90px; height:600px;"></div>
<div id="float2" style="width:720px; height:600px;"></div>

</div>

Code (markup):

 

you have to give each div a float property.
first, your container div must not have float just give it width.
next div is float left, then next div is float right and then center.
you didn't give your divs float properties.

 

Any reason the top div needs to be floated? If it doesn't, remove its float and just float the three divs left.

Otherwise float the three divs left and give #float1 "clear:left;"

 

You would set all your columns to float: left. (Not the container div. Only the 3 columns.) That way they will line up next to each other as long as the sum of the 3 columns width is less than the container div. Otherwise you'll get wrapping.

Then after the 3 make sure you insert a clear to clear the floats. This should give you the line break after the 3 columns.

Here's the breaking div and css

.clear {height: 0; clear: both}

<div class="clear"></div>

Code (markup):

If you need more help. Ask.

 

What would I do if I wanted my middle div 'float2' to be 900px wide with 'float1' and 'float3' overlapping it on either side?

 

You would never want to.
i cant remember about absolute positioned divs v floats and ooerlapping.
you ask strange questions. do you ant your content in the ov divs to hide content that it overlaps, or do you want content in middle 900px div flow?

 

Basicly the two side div columns are static 600px height and do not stretch. But the center div stretches from 600px up. I want to overlap the two side divs so they stay on the left and the right of the screen and I want the center div to be directly behind them with the side divs . How would I do this?

Thank you.

 

Can anyone help me?

 

<div id="top" style="float:left; width:900px;">

<div id="float1" style="width:130px; height:600px;"></div>
<div id="float3" style="width:90px; height:600px;"></div>
<div id="float2" style="width:720px; height:600px;"></div>

</div>

float 3 and 2 to the left make a div under that named something like <div class="clear"></div> with style .clear:clear:both;

 

But I need the div that you said was 720px to be 900px with the 2 side divs floated ontop of that div to the left and right.

This is what I've been trying:

HTML

<div id="wrapper" style="width:900px;">

<div id="top" style="float:left; width:900px; height:200px;"></div>
<div id="float1" style="clear:both; float:left; width:130px; height:600px;"></div>
<div id="float3" style="float:right; width:90px; height:600px;"></div>
<div id="float2" style="width:900px; height:600px;"></div>

</div>

Code (markup):

Basicly it's two columns floated to the left and right with a center column which is beneath the other two columns.

How would I do this? Thanks.

 

Never mind I got it.

 

Good things come to those who wait.

It might benefit others if you posted your solution here.

 

It's not a perfect solution, but it still works. I put the three columns in one div floated the main div left relative positioned it and the three columns are absolute positioned in the main div.

 

how about the display:inline; ?

 

Can you show the solution please? would really help me out.