Display ditto output horizontally (inline)

I have a div class that is supposed to display several blocks of information inline (horizontally, 3 products across, then down and across.) Not working, they are right now still displaying one on top of the other, so I am missing something but don’t know what.

The css class is:

div.mini_product {padding:0; margin:0; white-space:nowrap; list-style-type:none; text-align: center; }
div.mini_product li {display:inline; }

Then we have this chunk:

<div class="mini_product"><ul>[[Ditto?documents=`[*productRelated*]`&tpl=`miniProduct` &display=`2`]]</ul></div>

Then we have this chunk for the miniProduct template:

<li><a style="text-decoration: none;" href="[~[+id+]~]">[+productName+]
[+productSubheading+]

<img src="/assets/Thumb/phpThumb.php?src=/[+productImage+]&amp;w=150&amp;h=150" />
More Info</a></br></li>

Try using float: left; instead of display: inline; for the <li> element.

Perfect. Thanks!!!

S9

Make certain to look at it in IE6. IE6 does not calculate the math properly and you have to make the total section smaller than what it actually adds up to. I use this method all the time - se here: http://vision.websitewelcome.com/~synergys/Services and it can be a pain in IE6. Assuming you care about that browser!

Hey thanks. I’ve got it on my list to run the site through browsershots.org fairly soon. I’ll be sure to pay special attention to the IE6 rendering.

- John

IE6 looked great. Major trouble with Firefox.

Here’s the site if anyone wants to take a look... I’ll create a thread about the sidebar issue I’m having as well.

http://intrigue.websitewelcome.com/~mm/