Question

I have docbook generated HTML that contains small, fixed size images. All these images have the CSS property float: right These usually work as expected, but if two appear close together, they may not have enough room and will push against each other and alter the page layout, like this:

What I want to happen is for the div to be pushed down. If it’s vertical position changes, that’s ok, so long as the horizontal position is always right aligned, like this:

I want to be able to do this with CSS, but a Javascript solution would work too.

Answer 1

Should just be able to add clear: both; to the CSS for the images – this will cause them to move down to avoid hitting another floated element.