Category image overlaps DIV

I have a template that has user content modules on left and right of the main content. I am using the cart module on the right, and a menu module on the left, with configuring the category view to display only 3 columns.

The DIV element width i assume is set according to the number of columns set to display. Mine is set to 32% since i have 3 columns. With the DIV element being a percent, there is an issue with the category images overlapping if you have a image dimension set too large.

Actually after more testing, even removing static sizes from the image size configuration and more columns, it can still spill out. See attached photo.



The images size are set as static pixel size while the DIV element are a percentage. So as the content pane size changes, the div will adjust, but the images will not. Not sure if having the option to set the image size as a percent as well could avoid this issue or make it worse in other configs, or if there is another way to control this so the images don't spill out of the DIV element.

That only solves it as long as the screen is displayed at a given resolution. If i am viewing the page at 1024x768, it may look ok. Then if i decrease the size of the window, the size of the DIV elements change since they are set as a % of the available width. The images however are set as a static pixel size and will still spill out over the DIV elements.

Thanks, This seems to actually work pretty well.

This was for my Category listing, so changed the listing_div for category, i commented out

<div class="hikashop_category" style="width:<?php echo $width;?>%;">

<div class="hikashop_category" style="width:160px;">