Problema con lista

[sergi_multimedia]

Hola a tod@s,

Estoy haciendo una lista para mostrar unos productos, esta lista tiene 2 columnas, donde hay una imagen de cada producto más un pie de foto de 3 filas.

El código que estoy utilizando es el siguiente:

Código HTML:

<ul class="imatges">
 
<li><img src="../imatges/floover_03/wood/300/WD1001.jpg" alt="WD1001" width="300" height="105" /></li>
<li><img src="../imatges/floover_03/wood/300/WD1002.jpg" alt="WD1002" width="300" height="106" /></li>
<li><div class="parquet">0.3 Antic WD1001</div></li>
<li><div class="parquet">0.3 Green Grey WD1002</div></li>
<li><div class="parquet">915x305x9.8 mm</div></li>
<li><div class="parquet">915x305x9.8 mm</div></li>
<li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
<li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
<li><img src="../imatges/floover_03/wood/300/WD1003.jpg" alt="WD1003" width="300" height="105" /></li>
<li><img src="../imatges/floover_03/wood/300/WD1004.jpg" alt="WD1004" width="300" height="105" /></li>
<li><div class="parquet">0.3 Wengue WD1003</div></li></li>
<li><div class="parquet">0.3 White Grey WD1004</div></li></li>
<li><div class="parquet">915x305x9.8 mm</div></li></li>
<li><div class="parquet">915x305x9.8 mm</div></li></li>
<li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
<li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
<li><img src="../imatges/floover_03/wood/300/WD1005.jpg" alt="WD1005" width="300" height="106" /></li>
<li><img src="../imatges/floover_03/wood/300/WD1006.jpg" alt="WD1006" width="300" height="105" /></li>
<li><div class="parquet">0.3 Jatoba WD1005</div></li></li>
<li><div class="parquet">0.3 Maple WD1006</div></li></li>
<li><div class="parquet">915x305x9.8 mm</div></li></li>
<li><div class="parquet">915x305x9.8 mm</div></li></li>
<li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
<li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
</ul>
 

Código CSS:

.imatges li {
 
list-style: none;
display: inline;
margin-right: 15px;
}
 
.parquet {
 
font-size: 11.5px;
text-align: left;
width: 300px;
margin-right: 21px;
float: left;
font-family: Tahoma, Verdana, "Sans Serif";
margin-bottom: 3px; }
 
 
.parquet2 {
 
font-variant: normal;
font-size: 11.5px;
text-align: left;
width: 300px;
margin-right: 21px;
float: left;
font-family: Tahoma, Verdana, "Sans Serif";
margin-bottom: 40px; }
 

Bien, hasta ahí, todo correcto.

En este caso, en esta lista por ejemplo son 9 artículos, y en cada fila hay dos artículos, así que llegaremos a la última fila con solo 1 artículo. Aquí me vienen los problemas.

Que es lo que tengo que hacer? He probado muchas combinaciones, pero en la mayoría de los casos me sale la imagen, el pie de foto de filas debajo, y el pie de foto de la tercera fila me sale en el otro lado de la pantalla, y se me desconfigura todo. He intentado poner una imagen del mismo color del fondo para engañar, pero tampoco me ha funcionado.

Debajo de todo esto tengo este código:

Código HTML:

<div class="titol_h2"><h2><a id="country">Country</a></h2></div>
 

Código CSS:

.titol_h2 {
 
    border-bottom: 1px solid #7d7c7c;
    height: 2em;
    margin-bottom: 2em;
    }
 

y también se me desconfigura el h2.

La verdad es que no se si me he explicado bien, quizás así es difícil de entender. Si veo que no me explico miraré de subir la página en un servidor y os lo muestro. Bien, creo que igualmente es lo que voy hacer.

Gracias de antemano, y perdón por el tocho.