Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Product description ALWAYS under Main Image and Additional images

Product description ALWAYS under Main Image and Additional images

Locked

Views: 1,629

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
19 Mar 2009, 3:36 AM
#1
sonjamichelle avatar

sonjamichelle

New Zenner

Join Date:
Mar 2009
Posts:
21
Plugin Contributions:
0

Product description ALWAYS under Main Image and Additional images

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.

19 Mar 2009, 4:39 AM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Product description ALWAYS under Main Image and Additional images

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

#productDescription {clear: both;}

19 Mar 2009, 5:32 AM
#3
sonjamichelle avatar

sonjamichelle

New Zenner

Join Date:
Mar 2009
Posts:
21
Plugin Contributions:
0

Re: Product description ALWAYS under Main Image and Additional images

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?

19 Mar 2009, 2:59 PM
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Product description ALWAYS under Main Image and Additional images

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;