text wrap in floated div?

[VaporAction]

I'm making a page where there is an image and then text to the right of the image (the image and the text are both float:left)

my problem is that I've had to set the width of a containing div extra wide so as to accomodate text-resizing (if I don't set the width wide enough, then the text gets jammed under the image on text-resize).
The problem with the extra wide div is that it causes a horizontal scrollbar to appear even if there isn't any content extending beyond the window...
what I wish would occur is that the text would wrap on text-resize, then I wouldn't have to set the div so wide and I wouldn't get the scrollbar...this is how text in a table behaves but I can't figure out how to do it in a floated div?

here are links to the page and its css...
http://www.karlyoder.com/peterpagast/mrl_robeson.html
http://www.karlyoder.com/peterpagast/css/global.css

[toicontien]

The page you posted works just fine. What's wrong with it? The text wraps on resize just fine. When it gets too wide, it bumps itself under the image. No problem there.

And which DIV are you talking about being "too wide"?

[VaporAction]

the text doesn't actually wrap, the lines don't break...the text just gets larger and then when it hits the side of the wrapper div it drops below the image...in a table when the text hits the side of the table it breaks the lines of the text and then it just continues vertically, breaking lines as it needs to...

the "too wide" div is the wrapper div...it's "too wide" because it causes a horizontal scrollbar even though there's no content beyond the window...

[toicontien]

Ah, I see what's going on. The DIV tag that contains the text is floated left, and you want the text inside of it to wrap. Problem is, it won't wrap because that DIV is floated. You need to give that DIV a width. Try this out for a markup structure and styles for your photo and caption:
<dl id="fullsize">
<dt><a><img ... ></a></dt>
<dd>
<em>Caption here</em><br>
More caption
<strong id="fullnext"><a href="...">next &gt;&gt;</a></strong>
</dd>
</dl>
A definition list is more descriptive of the relationship between an image and it's caption. Then the CSS:
#fullsize {
margin: 0;
width: 900px;
}

#fullsize dd {
display: inline; /* For IE 5 and 6-Win */
float: left;
margin: 0 0 0 60px;
padding: 0;
width: 440px;
}

#fullsize dd #fullnext {
font-weight: normal;
margin: 50px 0 0 0;
}

#fullsize dt {
float: left;
width: 400px;
}

[VaporAction]

hey thanks man!
setting a width on the float made it wrap! yaayyyy!
I also took your advice on the more semantic markup...the only thing I changed was to use span instead of strong and I also needed to set display: block for the margins to work...