Multiple floats in IE not working

[andrewtayloruk]

Hi, i'm pretty new to CSS floats and need some help. It should be clear in my code but i'll explain what i'm trying to do here.

I have a main container (div.content_container) and inside that i have two smaller containers (div.content_left/div.content_right). These are lined up using float: left; display:inline;.

This was working great until i used floats again inside (div.content_left) the styles for these are below but they're used like this:

<div class="content_left">
<div class="div.content_left_packages">
<div class="content_package_one"></div>
<div class="content_package_spacer"></div>
<div class="content_package_one"></div>
<div class="content_package_spacer"></div>
<div class="content_package_three"></div>
</div>
</div>

From what i can work out it's an issue with me not clearing the floats?

I've played around with it but still can't get it displaying how i'd like in IE.

If anyone could help i'd really appreciate it.

Thanks

Here are the relevant bits of my stylesheet.

div.content_container { width: 784px; height: auto; margin-left: auto; margin-right: auto; background-color: transparent; }

div.content_left { float: left; width: 470px; height: auto; overflow: hidden; background-color: transparent; display: inline; text-align: left; }

div.content_right { float: left; width: 283px; overflow: hidden; background-color: #F6F6F6; display: inline; margin-left: 31px; height: auto; text-align: left; }

div.content_left_packages { width: 470px; height: auto; background-color: transparent; text-align: left; padding: 0px; margin: 0px;}

div.content_package_spacer { width: 10px; height: 10px; background-color: transparent; display: inline; float: left; }

div.content_package_one { width: 150px; height: auto; background-color: #f6f6f6; display: inline; float: left; }

div.content_package_two { width: 150px; height: auto; background-color: #f6f6f6; display: inline; float: left; }

div.content_package_three { width: 150px; height: auto; background-color: #f6f6f6; display: inline; float: left; }

And here is the bit of the html document that uses those styles

[4css]

I would say to apply the clearing to your floated divs.

Just add clear: both;

Also, do a google on the alsett clearing method. You might find that you'll like that one better.

Hope this helps!
4~css!

[vardars]

4css, thank you very much. Your little code helped me a lot. :))