Salve a tutti, sto' lavorando ad un eCommerce con Magento e si stanno mostrando alla finestra alcune mie ruggini su CSS.
Nello specifico sto' creando un elenco con immagini delle categorie e sottocategorie del negozio.
Dal punto di vista Server non ho problemi, ma ho problemi a creare una vista decente sul front end.
Bene il codice che ne viene fuori è il seguente:

codice:
<ul class="categories">





<li class="category">
 Tende e Coperture


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Gazebo/Stand/Igloo</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture/Tende Grandi</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture Sportive</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture Varie</p></div></div>[/list]




<li class="category">
 Gonfiabili Speciali


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture Piscine</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture Cryistal</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Garage Gonfiabili</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Schermi Gonfiabili</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Tunnel</p></div></div>[/list]




<li class="category">
 Gonfiabili Pubblicitari


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Cartelloni Gonfiabili</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Palloni ad Elio e Dirigibili</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Air Dancer</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Totem</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Mongolfiere Pubblicitarie</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Archi</p></div></div>[/list]




<li class="category">
 Cartoni &amp; Giochi


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Gonfiabili Cartoon</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Costumi Gonfiabili</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Costumi in Peluche</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Giochi</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Troni</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Torte</p></div></div>[/list]




<li class="category">
 Gonfiabili Acquatici


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Oggetti Acquatici</p></div></div>[/list]
[/list]
Ho modificato il file di stile in questo modo:

codice:
.category-img {
	padding: 2px;
	height:145px;
	width:145px;
}
.subcategories{
	list-style-type:none;
	margin: 0px;
}

.subcategory-container{
	width:150px;
	border-style:outset;
	border-width:2px;
	border-color:#0404B4;
	margin: 5px;
	text-align: center;
}

.categories{
	width:470px;
}

.category-link {
	color: #ffffff;
	font: 11px/28px Verdana, Helvetica, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
}

.subcategories-link {
	float: left;
	display: inline;
}

.category{
	width:470px;
	height: 28px;
	text-align: center;
	background-image:url(../images/category.gif);
	background-repeat: no-repeat;
	background-position:center;
}

.subcategories-container {
	width:470px;
	text-align: center;
}

.subcategory-name{
	width:145px;
}
Ma ciò che ne viene fuori è un elenco delle categorie una sotto l'altra.
Io vorrei invece che .subcategories-container e .subcategories-container2 rappresentassero le due righe delle categorie e rappresentassero i .subcategory-container centrati.

Dove sbaglio?