tablas en html

[mj1984]

Hola, tengo un problema con mi página web, y es que no se muy bien cómo distrubuir los elemento. Hasta ahora lo estaba haciendo con tablas, y el google chrome se veía perfectamente (poniendo el atributo position:absolute) pero al verlo en explorer todo se vio mal. Ahora mismo está puesto como position: relative para que más o menos se vea algo, pero no quiero que quede así. Mi idea es luego añadir nuevos caballos debajo de los que están.

Mi codigo hasta ahora es:

Código HTML:

<td valign="top" id="contenido">
                    <h1>Venta de potros</h1>
                    
                    
                    <table width="100%" border="0">
                    <tr>
                        <td width="50%" id="nombres_caballos" colspan="2">CALIFA EP</td>
                        <td width="50%" id="nombres_caballos" colspan="2">CASTOREÑO EP</td>
                    </tr>
                    <tr>
                        <td width="15%"><img class="imagen_caballo_chica" src="imagenes/chicas/califa1.jpg"></td>
                        <td width="85%" id="datos_caballo">Fecha nacimiento: 30/01/2010<br>Capa: alazana<br>Padre: Gondolero XVII<br>Madre: Ufana XXI</td>
                        <td width="15%"><img class="imagen_caballo_chica" src="imagenes/chicas/castoreño1.jpg"></td>
                        <td width="85%" id="datos_caballo">Fecha nacimiento: 25/05/2010<br>Capa: torda<br>Padre: Abenuz II<br>Madre: Dudosa XVII</td>
                    </tr>
                    <!--<tr>
                        <td width="50%" id="nombres_caballos" colspan="2">CELSO EP</td>
                        <td width="50%" id="nombres_caballos" colspan="2">CORDOBÉS EP</td>
                    </tr>
                    <tr>
                        <td width="15%"><img class="imagen_caballo_chica" src="imagenes/chicas/celso1.jpg"></td>
                        <td width="85%" id="datos_caballo">Fecha nacimiento: 28/01/2010<br>Capa: torda<br>Padre: Gondolero XVII<br>Madre: Jovena</td>
                        <td width="15%"><img class="imagen_caballo_chica" src="imagenes/chicas/cordobes1.jpg"></td>
                        <td width="85%" id="datos_caballo">Fecha nacimiento: 12/04/2010<br>Capa: torda<br>Padre: Abenuz II<br>Madre: Liticia</td>
                    </tr>
                    <tr>
                        <td width="50%" valign="top" id="nombres_caballos" colspan="2">CORINTIO EP</td>
                    </tr>
                    <tr>
                        <td width="15%"><img class="imagen_caballo_chica" src="imagenes/chicas/corintio1.jpg"></td>
                        <td width="85%" id="datos_caballo">Fecha nacimiento: 30/01/2010<br>Capa: castaña<br>Padre: Gondolero XVII<br>Madre: Muralla II</td>
                    </tr>-->
                    </table>
                    
                    
                    
                </td>
 

Y la parte de CSS es:

Código:

#nombres_caballos {
	font-size:20px; 
	color: #000000;
	font-weight: bold;
	background-image:url(imagenes/fondo_nombres_caballos.jpg);
	background-repeat: no-repeat;
}

#datos_caballo {
	font-size:15px; 
	color: #000000;
	position:relative;
	height:75px;
	text-indent: 0px;
}

.imagen_caballo_chica {
	position:relative;
	width:100px;
	height: 75px;
}

El resultado podéis verlo en: http://www.yeguadalaplata.com/potros.html

Muchas gracias por adelantado.