Text should wrap instead of overlap

Hello! I'm sure this is a stylesheet issue... The problem is that on my product info pages, depending on the size of the browser window, the text sometimes overlaps the image. I would like the text to wrap no matter what size the window is, even if the text ends up being 0.5" wide!

I found a post about this which suggested changing the margins for #productMainImage. I have my current stylesheet.css margins for that set to .5em 1em 1em .5em. However, I am also using the Product Info Mod Left Side, which has its own settings for the margins for #productMainImage in a separate product_info.css stylesheet. Those are margin:1.5em 1em 1em 0. However, I believe I was having this problem even before the mod.

I am new to CSS, so I'm hoping this is something very simple to fix!

See an example at http://www.chacha-vintage.com/shop/index.php?main_page=product_info&cPath=69_73&products_id=201.

Thanks so much!!

There is no cross-browser way of achieving this in CSS. Ultimately, when a site is compressed beyond that with which it can cope, it has to break somehow and browsers generally regard overlapping text onto images as the least worst way of coping. You might have been able to get close if IE supported the min-width style, but sadly, even IE7 doesn't.

You can however, exercise more control over how it breaks. If instead of using width:20% on #imagebox, which actually encourages the text to overlap the picture when the total width narrows to the point where 20% becomes less wide that the image, you could set the width in pixels no less than the width of the image.

If you then float #productbox to the left (instead of to the right) then when there isn't enough space for the text, it will drop neatly underneath the image, instead of walking all over over it.

Hello, Kuroi! Thanks so much for the help! This did make the item description go beneath the photo.

However, now I am concerned that maybe my medium photos are too big! On a "typical" monitor (which I don't own myself!), I would want the text to show up next to the photos. Is there some sort of guideline to know whether it will?? :shocking:

My current medium photo size is 252 x 252 (some of which is blank depending on the orientation of the photo).

You can check it out at https://www.chacha-vintage.com/shop and click into any of the categories.

Thank you!

Where can I find the vales for #imagebox and #productbox? I assumed they were in the stylesheet.css file, but I wasn't able to find them there.

@mcb.. I'm assuming you also have that add-on module. If so, you should be looking into the "product_info.css" stylesheet instead.

Sketchy:

@mcb.. I'm assuming you also have that add-on module. If so, you should be looking into the "product_info.css" stylesheet instead.

"add-on" module? which one?

Gerry

gcampos:

"add-on" module? which one?The "Product Info Mod Left Side" mod to which chacha-vintage refers in the post that started this thread.

Kuroi,

Sorry didnt read the message fully, now I see it. Where is this mod, I looked in downloads but dont see it.

Gerry

nevermind, did a search and found it, sorry, having a bad brain fart day.

Don't worry we all have them. Me more than most :lookaroun