Topic: Float layout issues

I have a dynamic layout that's generated by article feeds.  Partials basically fill content zones.  Each of these content zones (columns) is a float: left.  A Zone is just a fixed-width div with some styling. 

So here's a graphical representation of the issue:

Fixed Width Div ----->
/--------------------\
| /------\  /------\ |
| |Zone 1|  |Zone 2| |
| | data |  | data | |
| | data |  | data | |
| | data |  /------\ |
| | data |  |Zone 3| |
|           |      | |
|           |      | |
|                    |
|                    |
\--------------------/

So Zone 3 is actually supposed to fall under Zone 1, but because Zone 2 doesn't go down far enough Zone 3 fits in that crevasse.

My question is, how can I get my Third Zone under Zone 1?  If I could get Zone 2's bottom margin to match flush with Zone 1 I wouldn't have this problem because Zone 3 would not clip zone 1 when it wrapped.

Hope this makes sense.  Any suggestions?
-Bob

Last edited by BIGtrouble77 (2007-06-11 13:45:25)

Re: Float layout issues

Put a div after zone 2 with

#clear {
clear: both;
}

Last edited by Bink (2007-06-12 09:43:10)

Re: Float layout issues

Hi,

Do your content zones all have the same width?

If the Zone Divs don't fill the Fixed Width Div to 100% then your problem happens ( I hope I remember right now).

For example: set your Fixed Width Div to 400px width and your Zone Div to 200px. You can then fit 2 Zones next to each other and both will fill their parent container to 100% width (200 + 200 = 400 yay!). If you have more than 2 Zone Divs now they should neatly wrap around the next line now.

If the Zones Div do not use the whole width of their parent container, they try to shift in.

Tell me if that solves your problem. If not... I'll check my CSS, because I made something similar smile

Re: Float layout issues

Thanks guys.  Bink, I actually just discovered clear, and that fixed the issue. 

Rudi, I think part of my problem is that I actually have 4 columns, which complicated a few things.  I only put two columns in the example for simplicity.

Ultimately, clear worked so I'm all good now. 

Thanks again,
-Bob