Text wrapping when I don't want it to

[terrybarnes]

I have an image, on the left, and then a description of that image on the right. I've set up a div for the image and one for the description. The problem I'm having is when there's a lot of text then it wraps around the image div whereas I just want the text to continue down in one long column.

Here's the css for both:

div#smallimage { width: 131px;
height: 132px;
background-image: url(images/product-shadow-118.jpg);
background-position: -3px -2px;
float: left;
margin-left: -15px;
padding-top: 1px;
padding-left: 15px; }

div#productdescription { width: 647px; }

Not really much to it and I'm sure it's a really simple thing.

Any help would be much appreciated.

[terrybarnes]

Arh, I seemed to have solved this by changing to:

div#productdescription { width: 516px; float: right; }

Hopefully that's all okay?!

[Xapti]

A slightly better method would be to create a new containing box context or whatever it's called. This method is commonly used for floated menus with content beside as well:

For your content/text div, just apply the setting "overflow:auto" (or overflow:hidden, but I say auto is better). This makes it so that the float does not seem like it's residing inside the content div, in that the content div wraps around it (vertically).

[terrybarnes]

Thanks for this - a much better method.