Product description ALWAYS under Main Image and Additional images

[sonjamichelle]

I've been working on trying to keep my product description BELOW my main product image. I've moved the additional images up above the description and if the product has additional images the description stays put and doesn't wrap around. Though if there are no additional images the description wraps around the main image. It really throws off the layout and feel of the page.

I've done numerous searches on the forum and haven't found a solution that I understand. many posts refer to a "float" setting in CSS. Keep in mind I gave up doing html back when Netscape 2 was in beta and CSS is alien to me.

I know there's just a simple tag or change that we accomplish this, though I just have not located it.

Any help would be appreciated.

[gjh42]

In /includes/templates/your_template/css/stylesheet.css, find or add

#productDescription {clear: both;}

[sonjamichelle]

Thank you very much, it worked great.

To help me understand can you tell me what that statement is doing and what the parameters mean?

[gjh42]

The images are floated (left, in this case), which means they move by themselves as far to the top left as they can within their container area. Floated images are used for page layout, to get images embedded in a paragraph with the text smoothly flowing around them. Since you don't want that, the clear: property applied to #productDescription tells it to stay below any previous floats of that kind. You can clear left floats, right floats, or both, which works on everything.

clear: left;
clear: right;
clear: both;