Normal

moose Paragraph of text next to a floated image, since there is enough text here you won't have to worry about any float issues. Ut suscipit. Curabitur vel risus. Morbi sollicitudin, est nec ullamcorper fermentum, urna eros luctus mi, eget congue enim mauris tincidunt orci. Fusce scelerisque, nisi eu suscipit fringilla, massa orci scelerisque erat, at vehicula justo purus at enim. Nulla ac dolor eget magna porttitor luctus. Nullam cursus nulla. In lorem orci, faucibus ac, aliquet a, sagittis eleifend, lorem. Nam nec orci. Phasellus mauris. Nullam cursus nulla. In lorem orci, faucibus ac, aliquet a, sagittis eleifend, lorem. Nam nec orci. Phasellus mauris.

div w/clear: both

moose In this paragraph there's a lot less text so we had a problem, the paragraph below this moved up into the empty space available, it doesn't do that now as I've added a div with clear: both as a css attribute after this paragraph...this clears the floats above. Fusce fringilla, massa orci scelerisque erat, at vehicula justo purus at enim.

moose This paragraph no longer moves up into the area available because of the clearing div above. I could have also done this by setting a clear: both for this p tag using a class...see below. Morbi sollicitudin, est nec ullamcorper fermentum, urna eros luctus mi, eget congue enim mauris tincidunt orci. Fusce scelerisque, nisi eu suscipit fringilla, massa orci scelerisque erat, at vehicula justo purus at enim. Nulla ac dolor eget magna porttitor luctus. Nullam cursus nulla.

clear: both applied to paragraph below

moose In this paragraph there's a lot less text so we had a problem, the paragraph below this moved up into the empty space available, it doesn't do that now as I've added a style with clear: both to the paragraph immediately below this one...this clears the floats above. Fusce fringilla, massa orci scelerisque erat, at vehicula justo purus at enim.

moose This paragraph no longer moves up into the area available because of the clearing div above. I could have also done this by setting a clear: both for this p tag using a class...see below. Morbi sollicitudin, est nec ullamcorper fermentum, urna eros luctus mi, eget congue enim mauris tincidunt orci. Fusce scelerisque, nisi eu suscipit fringilla, massa orci scelerisque erat, at vehicula justo purus at enim. Nulla ac dolor eget magna porttitor luctus. Nullam cursus nulla.

overflow: auto applied to 1st paragraph


this fix won't work in IE6

moose In this paragraph there's a lot less text so we had a problem, the paragraph below this moved up into the empty space available, it doesn't do that now as I've added a style of overflow: auto to this paragraph...this clears the floats above. Fusce fringilla, massa orci scelerisque erat, at vehicula justo purus at enim.

moose This paragraph no longer moves up into the area available because of the overflow: auto above. I could have also done this by setting a clear: both for this p tag using a class...see below. Morbi sollicitudin, est nec ullamcorper fermentum, urna eros luctus mi, eget congue enim mauris tincidunt orci. Fusce scelerisque, nisi eu suscipit fringilla, massa orci scelerisque erat, at vehicula justo purus at enim. Nulla ac dolor eget magna porttitor luctus. Nullam cursus nulla.