Problem with floating divs

[perky416]

Hi guys,

 

Im doing a quick website for someone. I am trying to give 4 divs the layout below:

 

{        header        }

{left}{center}{right}

{        footer        }

 

I have the left center and right divs floated left to get them in aligned horizontally. The problem im having is that i know float takes the divs out of the flow. So now my footer is half concealed by the floated divs. For example the floated divs are 50px high, and the footer is 100px high, im only able to see the bottom 50px of the footer.

 

Does anybody know a quick way around this?

 

Thanks.

[hemo-ali]

Ok but

why don't you  use margin

[perky416]

Hi hemo,

 

Do you mean margin-top on the footer?

 

The 3 floated divs are a variable height, they will all be the same height however it varies depending on what content is placed in them.

 

If i use the margin, as soon as the height changes they will overlap again.

 

Thanks

[cssfreakie]

since you don't have any code or even better an on line example we have to guess.

My best guess is that you are missing the clear property, which is pretty vital when using floats

[perky416]

Thanks mate,

 

Cant believe i missed that. I actually remember using that in the past. Putting clear on the footer solved the problem. Thanks mate.

[cssfreakie]

Thanks mate,

 

Cant believe i missed that. I actually remember using that in the past. Putting clear on the footer solved the problem. Thanks mate.

 

your welcome!   don't forget to mark the topic solved, saves us time reading through