Featured Products Layout not working - Stacking Items, not gridding them

[JeffTew]

FEATURED PRODUCTS LISTING VIEW ISSUE

I am attempting to add some of the products that are in my store to the Featured Products pane on my home page.
I am using the default setting on ZC, and it seems that the more I add, the taller the page gets. I thought that they would lay out on a 3 by X grid, not a single column. (I might be missing a simple setting, but I haven't seen it - I think.)
Is this a simple fix, or is there something like more serious coding needed to fix this?
Thanks for the help,
Jeff

Site: www.oaktreeseed.com
Zen Cart: v1.3.9b (Clean install, no upgrade, only template added.)
Host: GoDaddy.com
Addons: No addons other than what came out of the box (GoDaddy) and the EZPopulate that I am asking about
Customization: Nothing more than the template, some box sizing, and standard changes for esthetics. (I have not changed the /admin/ folder as yet, the site is not up and running live until 31JUL10)
Started: Immediately following the installation of EZ Populate v1.2.5.4

[tony_sar]

add this to end of your stylsheet.css

.centerBoxContentsFeatured {
float:left;
}

[JeffTew]

Took me a while to get back here; Summer vacation and all.
Thanks for the code, I would have never been able to find that out, I am not good with CSS. I GREATLY appreciate the help.
I see that now have the same issue with the Specials that I and posting. I looked at the code for hours and i cannot begin to guess how to even start to know what it means.
Would this same code work applied to a different location on the style sheet, or am I absolutely off base on that guess.
Thanks again,
Jeff
http://www.oaktreeseed.com

[stevesh]

Just add the red part to tony's code:

.centerBoxContentsFeatured, .centerBoxContentsSpecials {
float:left;
}

Here's the best advice I can offer:

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

[JeffTew]

OK, time for me ot get some CSS training.
Such a simle problem, been driving me nuts,and you guys are right on the ball with the solution.
I am going to take you up on the FF suggestion.
Thank you very much!!!

Jeff Tew
http://www.oaktreeseed.com