Can't have 2 images at ecah row.

[akaraman]

I use Zen Cart v. 1.3.8. Two column layout mistik template.
I want to display two images at every row. So in
Admin>Config>Maximum Values I set Categories To List Per Row=2
and in Admin>Config>Index Listing I set Categories To List Per Row=2
What I obtained is one image at each row.
When I set both numbers to 3, then I obtain two image in one row and one in the following. And this pattern repeats.
When I set both numbers to 4, then I obtain 3 image in one row and one in the following. And this pattern repeats.
I couldn't understand this structure and I am seeking a solution. Thanks in advance

[s_t_e_v_e]

A link to your site would help forum members troubleshoot your layout problems...

I am guessing you have some borders and padding on some elements of your page, which are preventing 2 divs floating side by side... (2 divs are given a width of 50%)

Get yourself Firefox with Firebug - for CSS troubleshooting.

[akaraman]

Here is my link:
http://www.camtasarim.com/
Currently I selected 3 image columns.
As seen from the web site, by doing this it works as two plus one.
If I select 2 image columns then it works as one plus one.
When I switch to classic template the problem disappears.
Switching to the classic template I obtain two images at each row.
Thanks for the helps.

[s_t_e_v_e]

Using Firefox and Firebug...

The product divs are set to a width of 33%... so you would think 3x 33% =99 and should fit inside the containing div... Unfortunately, padding and margins are added to the size of your product div.. so 3 divs cannot fit side by side...
33%+padding + 33%+padding +33%+padding = too wide... so the third div moves below the others...

Your CSS;

.cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading, .rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, label#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {stylesheet.css (line 598)
font-size:11px;
padding:0.5em;
text-align:center;
}

If you set this padding to 0 you will get 3 divs side by side..

I can also see that 33% of your currect page size is giving you a width of 188px - You are using an image within this div of 195px wide...

[akaraman]

Great!
This has solved the problem but created a minor one.
After the change in the stylesheet.css, something happened in the left column. Then I switched back to the original stylesheet file. Here is the picture of the page when padding is zero:
http://www2.ogu.edu.tr/~akaraman/webpage.jpg
Comparing to the original one (www.camtasarim.com), the labels in the red circles are narrower.
Can it be fixed?
If it can't then I will ask my wife for which one to prefer: two images per row with narrower labels or two plus one images with regular labels.

[s_t_e_v_e]

Leave the original padding as 0.5em and then add the line below to the bottom of your stylesheet.

div#whatsNew div {padding:0;}

[akaraman]

Thank you very much.
The problem is completely solved now.

[akaraman]

Steve,

I have one more question.

The problem above have been solved for most browser.

Using firefox I get two images per row
( http://193.140.141.18/~akaraman/ct3.jpg ), which is what I want.

At local versions of internet Explorer the problem stil exists
( http://193.140.141.18/~akaraman/ct2.jpg ); however a forum member having an American version of ie reports that he sees two images per row.

Is there any simple trick to make it sure that it displays two images per row at every browser?

I have been searching an answer for a long time; I appreciate any help.



akaraman