lorem ipsum

A 300px wide box

lorem ipsum

a cleared box

A fluid wrapper (gray) contains:

• A left float (blue) (here it is an image, but could be anything else)
• A not floated wide box (yellow), inside a green box having a wide negative margin-right

The negative right margin on the green box fixes the falling of the yellow box below the float that occurs in IE7-/Win at narrow browser windows. The green box has no adverse effects on the horizontal scrollbar that correctly shows up when the yellow box doesn't fit in the window.

• The initial page, with the falling box only.
• With a wide box inside the wrapper (it alone, without negative margins, does not fix the problem.)
• With a large negative right margin on the falling box (it alone, without wide box, does not fix correctly the problem: no more dropping, but the the right part of the green box is inaccessible at narrow sizes.)
• With a wide box inside the wrapper and negative right margin on the falling box (solves the problem.)

CSS tests home