I have some divs sitting on top of each other, with a floating picture in them. If the picture is larger than the div, then it pokes out the bottom. IE formats the next div below the picture, Firefox does not. It starts immediately below the previous div, whether this is above or below the bottom edge of the picture. Now this is actually a problem, because what I want is the way IE does it. What is the simplest way of padding out the div so that the one below it starts after the picture. I mean one way is to just add some breaks into the top div to extend it downwards until it is about the same size as the picture floating in it, but this is a bit of a chore. I can't think of a better way though.apply clear: both; to the div below?That is brilliant! When you float things, the float allows them to "break out" of the walls of the containing element. IE however will always (by default, and quite wrongly) stretch the parent element downwards to accomodate the floated element.
By applying clear:both; to the element following, what you are doing is specifying that no floated element should be allowed to float next to it, therefore the following <div> tag is "pushed down" below the floated element.
clear:left; would allow floated elements on the right but not the left, and vice-versa for clear:right;
Just thought I'd better explain, no use using something if you don't know what it does or why it's doing it.
By applying clear:both; to the element following, what you are doing is specifying that no floated element should be allowed to float next to it, therefore the following <div> tag is "pushed down" below the floated element.
clear:left; would allow floated elements on the right but not the left, and vice-versa for clear:right;
Just thought I'd better explain, no use using something if you don't know what it does or why it's doing it.