Help with CSS border around Description

[Redcinamn]

Hi guys,

I wonder if someone could help me with this border around the description on the product page. It seems the border will not collapse around the description itself leaving it to melt into the main image to the left.

See screen shot :

I have marked where the border continues and ends. Can some help me with this. I know there is something I should probably be adding to this: maybe collapse border? But Im not sure. Thanks in advance.

#productDescription {
/*font-size: 1.2em;*/
padding: 0em;
text-align: left;
border-style: inset;
}

[niccol]

It is because the image is floated left. So, the text is pushed left to avoid it but the border still stays the same shape. Why? because the css pixies say so.

You can work around it by adding a left margin to the description which matches the width of the image.

Actually a good way of understanding why is to imagine that the text is much longer and extends beneath the image. It would wrap under the image and be full width. (This is an ugly problem on some sites that can be remedied with a left margin). So the width of the text element is actually the full width. So the border is full width.

[Redcinamn]

Thank you so much for your reply. I have been playing around with the code and implemented your suggestion. We have set the margins at a largest possible width of the largest image ( as some images are different sizes in width). I was wondering if there is a better way to handle this since their product images are very random. Does this require a heavily modified theme to get this to align?

Thank you!!
Red

[niccol]

Is your layout fixed width or fluid?

[Redcinamn]

Her layout is a fixed width.

[gjh42]

There are some product info page layout mods in Free Addons that have various arrangements of elements, and one of them might be a good base to get your page the way you want it.