Forum Moderators: not2easy
To avoid this, simply be sure to put those floats inside of a container box that has a width set in PX, equal to just slightly more than the combined width of the floats. Make sure to flaot this conatiner as well so that it encloses the two floats in all browsers.
I just tried it and it's great for at least 1 thing : my container background image now just flow all the way down till it reachs the longest div inside without using tricks at all and in both IE and Mozilla.
Could you just clarify this :
"Make sure to float this container as well so that it encloses the two floats in all browsers."
To avoid this, you need to force the container box to expand and enclose those floats. IE browsers automatically do this (which is a mistake on their part), but compliant browsers follow the specs and don't. To make them do it, you need to apply a float value (and a width!) to the containing block, itself.
Another option is to apply a clear:both to the element (like a footer) that follows the container. However, if the container block itself has any styling (background color, background image, borders), these will not appear in compliant browsers because the container has no in-flow content. In this case, you must float the container.
my container background image now just flow all the way down till it reachs the longest div inside without using tricks at all and in both IE and Mozilla.
