Product info page layout problem

[Baron5]

Hey guys, I have done a fair amount of work on my zencart site, albeit maybe not the most effective way but it seems to be functioning well and I am down to a few last touches that are maybe out of my depth to fix alone.

The first problem is related to the product display page
worldwideweb.innatestreetwear.com.au/zencart/index.php?main_page=product_info&cPath=65&products_id=180
I have continuously tried to alter the product info page using filezilla and a text editor to get it how the layout is currently, however I cannot seem to find a way to have the text sit just below the image. I would like to have the text sitting below or even just placed around the image somehow.
Now i could be wrong but it seems the problem here is that I installed the 'lightbox' (IIRC) for the product images and it seems if you look at this element using firebug it is a flash element and actually has no size. The text therefore sits over the top, i have tried placing borders but this does not work. The only method I found that worked was to offset the text using margins but then other pages such as this one
worldwideweb.innatestreetwear.com.au/zencart/index.php?main_page=product_info&cPath=66&products_id=184
the image size is different and the text will sit too far down.

If someone could help me with this issue it would be much appreciated.

[haredo]

Looks like you need to add a clear: both the the your_template/ templates/ product_info_display or this:

Find this:

zencart/includes/templates/apparel_boutique/css/stylesheet.css

Edit this on line 244:
#productDescription {
color: #000000;
margin-top: 38em;
}

Notice I added the red font above for the fix ...

[Baron5]

I appreciate the quick reply, right now i cannot access my site because I'm not at home but I'll be sure to report back once i try this. Just to clarify, i need to add the clear: both to the product_info_display OR I can add that fix to the stylesheet? Also how does this fix my issue? will it allow me to place the text underneath on the product_info_display coding and it will no longer overlay ?

[haredo]

Just follow my instructions above with a hugh smile and tons of sales ...

Have a great weekend ..

[Baron5]

I tried the fix that you posted in red above however this is the same as the fix I tried myself, it just creates a big margin but on the second page i posted that has a smaller image the text is then far below the image and this is not how I want it. I'm not sure where to place the clear: both code in the product_info page but i remember trying something like this before to no avail, have any other ideas how i could achieve what i need?

[gjh42]

Find the #productMainImage {} and #productDescription {} rules in your stylesheet.css and modify those as shown in red.

#productMainImage{float:left;padding: 0em;margin: 1em 1em 0em 2em; height: 42em;}
#productDescription {color:#000;margin-top: 1em; clear: none !important;}


Of course, this means that the image will always occupy 42em of height even if the image is different. I don't think there is a simple way around this... maybe some fancy javascript could do it dynamically.