This is a normal paragraph. It and most of its block-layout brethren follow the CSS spec and appear below the floated (red) element, as if it wasn't there at all. Line boxes (text) are pushed aside by the float, but the box itself is not. That's why you can see a blue box underneath the red float. This is fixed as of Firefox 3 RC1!

• This list item should extend all the way to the edge of the yellow box, which is its parent UL. List items should just behave like normal boxes, and don't create their own block formatting context. Instead, in Firefox this box is moved over by the red floated sidebar.
• This problem has been filed as Bug 163110 (and many duplicates or similar bugs). Please vote for this bug on Bugzilla.
• Note how the last few list items will actually resume their natural width once they've gotten past the float.
• You can work around this unpleasant behavior by setting "width: 100%" on your LIs, or adding "-moz-float-edge: content-box;" to the LIs.
• Etiam pharetra quam sed est malesuada euismod. Quisque euismod, tortor placerat faucibus iaculis, mauris libero sagittis elit, volutpat feugiat dui ipsum at lacus. Integer vitae nulla. Sed at nisl. Nunc facilisis rhoncus magna. Vivamus eleifend, lectus ut dapibus volutpat, nibh libero nonummy pede, non pulvinar tortor quam sit amet magna. Sed convallis dui sit amet nunc. In hac habitasse platea dictumst. Vivamus sit amet tortor. Vestibulum scelerisque faucibus est. Morbi mauris tortor, bibendum nec, accumsan a, viverra sit amet, enim. Nam leo. Donec accumsan nunc id mi. In hendrerit justo in quam. Donec sollicitudin luctus nisl. Nullam a ipsum sed mauris congue bibendum. Etiam pharetra, augue sit amet consectetuer auctor, tellus erat vehicula nulla, ac placerat dui neque at augue.

Back to Browser Bugs