Question

I’m work on the CSS for a page and I can’t fathom out what is going on with my floated left divs and the effect it is having on the image floated right.

http://www3.nottinghamshire.gov.uk/enjoying/countryside/countryparks/sherwood/schoolvisitsherwoodforest/

If you look at the code you’ll see that the image on the page (the tour guide talking to the kids) appears directly after the first paragraph on the page. Yet it always appears level with the 3rd (and final) div that has been floated left.

This behaviour only seems to occur in the modern browsers IE8, IE9, FF, Chrome etc. IE6 and IE7 seem to deal with it in the way you’d expect.

I’ve been working with CSS for a number of years and was pretty confident that I could solve most CSS issues but I’ve been looking at this for 2 days and I can’t figure out what is going on. Here’s hoping that some SO experts can spot my errors and point me in the right direction.

The HTML is mainly from the CMS we are using, I don’t normally nest my elements to such a great extent.

Answer 1

From the Visual formatting model specification,

Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

This means that when you float a div, it doesn’t appear any more “top” then it would have despite the float. Without diving into the specifics of your situation, have you tried re-arranging the order of your divs such that the tour-guide image would naturally occur at the vertical position you would like and expect?