mostrar cada 4 tablas en 1 fila

[Dundee]

Hola gente , tengo varias tablas con contenido relacionado a usuarios del sitios. El tema es que me gusaría que cada 4 tablas salgan en una fila; para ello he utilizado float:left y en la primera fila funciona, se muestra las 4 primeras. El problema surge en la segunda fila que se muestran dos tablas y la tercera baja a una segunda fila.

Este es el html:

Código:

<div class="cb_template_default">	<hr class="cbUserListHrTop" size="1" />
	<div id="cbUserTable" class="cbUserListTable cbUserListT_4">
	  <table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=68&amp;Itemid=49">andrea</a></span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=68&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn68_4c924a8890f59.jpg" alt="andrea" title="andrea" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=63&amp;Itemid=49">mariola</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=63&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn63_4c90734131978.jpg" alt="mariola" title="mariola" class="cbThumbPict" /></a></span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>fff</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>española</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=69&amp;Itemid=49">morena2</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=69&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c924b896ea09.jpg" alt="morena2" title="morena2" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=65&amp;Itemid=49">morenaca</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=65&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn65_4c924ace1ab41.jpg" alt="morenaca" title="morenaca" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>

			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=64&amp;Itemid=49">pepona</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=64&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn64_4c90747129f66.jpg" alt="pepona" title="pepona" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=67&amp;Itemid=49">rubiaca</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=67&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c9087248d250.jpg" alt="rubiaca" title="rubiaca" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=66&amp;Itemid=49">zorraida</a></span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=66&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c9086ad0b71e.jpg" alt="zorraida" title="zorraida" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table>
	</div>	

	<hr class="cbUserListHrBottom" size="1" />
</div>

y el css que utilizo es este (en este caso la idea era que mostrara solo tres filas , de ahí el nombre tree_cols de la clase, pero me da igual que muestre 4).

.tree_cols {float:left; margin:5px 0; width:200px}
.cbUserListFieldLine {margin:5px;width:200px;}

[DragonX]

tenes errores graves en el codigo, tipo:

Código HTML:

<table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
 

revisalo y probalo!
Slds.-

[Dundee]

Iniciado por DragonX

tenes errores graves en el codigo, tipo:

Código HTML:

<table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
 

revisalo y probalo!
Slds.-

Ok ,perdón se me pasó , pero aún arreglando eso sigue el mismo problema que comentaba atrás.
<table class='tree_cols'><tr><td valign="top" class="cbUserListCol1">

[Dundee]

Madre mia, no entiendo porque leches no se apilan a la izquierda, es curioso.
He sustituido ahora las tablas por DIVS flotados a la izquierda, pero me sigue pasando exactamente lo mismo:

Código:

<div id="cbUserTable" class="cbUserListTable cbUserListT_4">
	  <div class='tree_cols'>1
<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=68&amp;Itemid=49">ffdsfdsf</a></span>
</div>

<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=68&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn68_4c924a8890f59.jpg" alt="andrea" title="andrea" class="cbThumbPict" /></a></span>
</div>
				
<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=63&amp;Itemid=49">mariola</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=63&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn63_4c90734131978.jpg" alt="mariola" title="mariola" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>Acompañante de lujo. Señorita acompañante de lujo</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>española</span></div>

</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=69&amp;Itemid=49">morena2</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=69&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c924b896ea09.jpg" alt="morena2" title="morena2" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=65&amp;Itemid=49">morenaca</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=65&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn65_4c924ace1ab41.jpg" alt="morenaca" title="morenaca" class="cbThumbPict" /></a></span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=64&amp;Itemid=49">pepona</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=64&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn64_4c90747129f66.jpg" alt="pepona" title="pepona" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=67&amp;Itemid=49">rubiaca</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=67&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c9087248d250.jpg" alt="rubiaca" title="rubiaca" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>

</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=66&amp;Itemid=49">zorraida</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=66&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c9086ad0b71e.jpg" alt="zorraida" title="zorraida" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div>
	</div>

El css no lo pongo porque ya lo puse arriba en el primer post.
Pego una imagen para que se vea como se apilan mal las capas (el problema sucede a partir de la segunda fila).


Mil gracias por la ayuda

[cronosmen]

Utiliza

#clase .clase {
margin-left:-Xpx; (Donde x es el número de pixels es ir probando, te recomiendo usar la herramienta Firebug de firefox)
position:absolute;
}

[Dundee]

Iniciado por cronosmen

Utiliza

#clase .clase {
margin-left:-Xpx; (Donde x es el número de pixels es ir probando, te recomiendo usar la herramienta Firebug de firefox)
position:absolute;
}

La verdad que ya lo he solucionado, pero gracias.
El problema era que uno de los campos "título" tenía un contenido demasiado largo, lo he limitado y ya funciona perfectamente.
De todas formas a dia de hoy sigo sin tener claro que diferencia existe entre abosolute y relative , yo suelo utilizar float y no necesito absolute ni relative (creo que este último lo hace por defecto pero no entiendo muy bien su significado).

Un saludo y gracias

[jomaruro]

Hola:

Entonces puede resultarte útil el aporte que hizo Mikmoro al foro de CSS: Migración sin dolor.

Creo recordar que era el capítulo tercero donde explica muy clarito las diferencias entre relative, absolute, fixed y static.

Saludos.

[Dundee]

Iniciado por jomaruro

Hola:

Entonces puede resultarte útil el aporte que hizo Mikmoro al foro de CSS: Migración sin dolor.

Creo recordar que era el capítulo tercero donde explica muy clarito las diferencias entre relative, absolute, fixed y static.

Saludos.

Jomarura mil gracias . lo voy a revisar, de todas formas he visto algo de librosweb.es donde se explica muy bien lo del css, pero sigo liándome aveces con absolute y relative , y sobre todo mi problema es no saber bien cuando usar uno u otro.
Un saludo (::

[Dundee]

esta duplicado y no me deja borrarlo (::