Cell highlight on rollover - Why is it putting products in new lines?

[cvocvo]

Hi all.

I'm building my first Zen Cart store and I want the cell background to change colour when you hover over it in the What's New section.

I've managed to get the cell to change colour but for some reason when it does that it puts the products on separate rows.

The URL is http://www.southamericansupermarket.com

I've used the following CSS and HTML.

CSS

.centerBoxContentsNew {

	margin: 1em 0em;
	
	background-color: #ffffff;
	
	color:#000000;
	
}
	
.centerBoxContentsNew.on {

	margin: 1em 0em;
	
	background-color: #999999;
	
	color:#000000;
	
}

HTML

<div class="centerBoxContentsNew" onmouseover="this.className='centerBoxContentsNew on'" onmouseout="this.className='centerBoxContentsNew'"

Any help or opinions on this would be greatly appreciated. Also if there is a better way of doing this. Thanks.

[tony_sar]

add this to end of your stylesheet.css

.centerBoxContentsNew {
float:left;
}

you can do hover using just CSS no need for javascript .

[cvocvo]

Wow. I spent all day trying to figure it out and the solution is soo simple!

I'm new to CSS and curious why you need the float attribute when you change the background but not when the page is originally loaded?

And big thanks, Tony

[gjh42]

If the items float correctly without hover, you wouldn't need to add it for the hover state when using the CSS background property.

.centerBoxContentsNew:hover {
	background-color: #ffffff;
	color:#000000;
	}

You only need to specify the properties that are changing for the hover state.