Paragraphs float left & Images float right

...text doesn't wrap around images

[Storyman]

This is the CSS coding:

img {
float: right;
padding-right: 15px;
}

p {
line-height: 1.3em;
width: 60%;
padding-bottom: 1.6em;
text-align: justify;
padding-left: 15px;
float: left;
}

#content {
float: left;
width: 60%;
padding-left: 100px;
}
----------------------------------------------------

Objective: when the images (that float right) reach into the text area (the paragraph) the text should wrap around the image.

What happens with this code is where the image reaches into the text the text breaks, leaving a large white gap.

What's wrong?

[createErrorMsg]

when the images (that float right) reach into the text area (the paragraph) the text should wrap around the image

Text wraps around floated elements when the floated element is actually sitting on top (or floating over) the line-boxes which hold the text.

When you have a div that has a floated image and then non-floated paragraphs, it works perfectly, because the image is actually floating overtop of the paragraphs. The browser simply moves the text inside of the line-boxes created by the paragraph over so it isn't covered up.

But when two elements are floated, they interact in a very different way, namely that their egdes won't overlap.

If two elements float in the same direction, their edges "stack" together horizontally as long as there is room (if there isn't, the second float wraps to below the first and then floats). If they float in opposite directions, they will sit side by side so long as there is room for both. If the container cannot accomodate both widths, again, the second float moves below the first and then floats in it's assigned direction.

So to get that <p> text to wrap, you'll need to un-float the paragraph. OR nest the image inside of the paragraph and float it there.

cEM

[Storyman]

Thanks for your explanation.

Here is the revised code:

img {
float: right;
padding-right: 15px;
padding-left: 15px;
}

p {
line-height: 1.3em;
width: 60%;
padding-bottom: 1.6em;
text-align: justify;
padding-left: 15px;
}

#content {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-left: 100px;
}

[createErrorMsg]

Storyman, that should work fine. I would make one adjustment: unless it causes other problems with your layout, put the float back on the #content div. This will cause it to enclose the floated image, should the image turn out to be taller than the text.

Since only the text is able to control the height of the container (floats are removed from the flow), you could potentially have that image jutting out of the bottom of the box and overlappping whatever comes next in the layout, should your content div wind up with very few text line-boxes. Floating #content will force it to recognize the floated image as content in the div and adjust it's height accordingly.

cEM

[Storyman]

Everything works in FF, but IE shows the gap. There must an IE hack that I need to learn about.

[Storyman]

Decided to strip everything down to the bare bones and add one element at a time until the problem appeared. It didn't take long before the culprit appeared.

Why is it this works in IE?

img {
float: right;
}

p {
text-align: justify;
}

#content {
width: auto;
height: auto;
}

But when {width: 60%;} is added to the paragraph definition a white gap appears to the left of the image.

p {
text-align: justify;
width: 60%;
}

The idea is to have a column of text to the left and images to the right. When the images are large the text needs to wrap around it (not create a white gap).

Using {width: 60%;} in 'p' has no impact in FF (I guess it is another IE bug).

Is there a work around for this IE bug?

Or is there another way to approach the design goal?

[createErrorMsg]

But when {width: 60%;} is added to the paragraph definition a white gap appears to the left of the image.

Ah! Sorry I didn't see that sooner.

The problem is indeed a bug in the IE float model that crops up whenever you have a floated element adjacent to a non-floated element with a width. IE miscalculates what the width should be a percentage of. Rather than try to explain, I'll just refer you to this page [positioniseverything.net] at PIE, where it is explained far more sussinctly than I ever could.

cEM

[Storyman]

createErrorMsg,

Thanks for helping me solve the problem. Once I got beyond thinking in the box the solution (via the article link) became self evident.

Instead of 'width: 60%' the right padding became 30% and the left padding 10%, which in effect gives the column 60%.