Problema con Tablas (div)

[canon882]

¿Qué tal? ¿Cómo vamos? Espero que todo bien. Esta vez escribo para consultarles sobre una duda que tengo. Y es que he estado desarrollando mi plantilla en Joomla y me estuvo yendo todo genial. Sin embargo, parece que tengo un problema con las tablas (supongo que el problema no tiene nada que ver con Joomla, sino con la CSS de la tabla).

Miren este modelo de tablas que he desarrollado:


Sin embargo, al empezar a rellenarla tengo este problema:


Como verán, la segunda tabla de la primera columna se correo hasta llegar al final de la primera tabla de la segunda columna. Quisiera saber de qué manera, con CSS, puedo evitar este problema.

PD: Las 'tablas' las estoy desarrollando con los comandos 'div'. Al final adjunto los códigos.

Muchas gracias por su atención.

index.php

<div id="contenido">

<div id="tabla01_columna_01">
</div>

<div id="tabla01_columna_02">
</div>

<div id="tabla02_columna_01">
</div>

<div id="tabla03_columna_01">
</div>

</div>

template_css.css

#contenido {
color: #000000;
width: 755px;
float: left;
padding: 0px;
margin: 0px 0px 0px 0px;
border: solid;
border-color:#FFFFFF;
border-width:10px;
background: #CCCCCC;
}

#tabla01_columna_01 {
float: left;
color: #000000;
border: 0px solid #000000;
background: #999999;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 555px;
}

#tabla01_columna_02 {
color: #000000;
vertical-align:top;
border: 0px solid #000000;
background: #CCCCCC;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 200px;
float:left;
}

#tabla02_columna_01 {
float: left;
color: #000000;
border: 0px solid #000000;
background: #999999;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 100%;
display: inline;
}

#tabla03_columna_01 {
float: left;
color: #000000;
border: 0px solid #000000;
background: #999999;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 555px;
}

[Mikmoro]

Pruébalo así:

<div id="contenido">

<div id="tabla01_columna_02">
</div>

<div id="tabla01_columna_01">
</div>

<div id="tabla02_columna_01">
</div>

<div id="tabla03_columna_01">
</div>

</div>

y ponle a la columna 2 de la tabla 1 un float: right; en la css.

P.D.: los div no son comandos, son cajas

[canon882]

Muchas gracias por tu respuesta, pero sigue igual.

Para que veas que no te miento: www.anderock.com/v05/

[canon882]

Ya lo corregí. Era por un problema en las dimensiones de una tabla de primera columna. Le puse como anchura (width) 100%.

[Mikmoro]

Ah, muy bien, no obstante, te sigo recomendando que hagas lo que te he dicho; funciona mejor que todos los float left.

[canon882]

Una consulta adicional (si las reglas del Foro lo permiten).

Había puesto el ancho (width) de 100%, porque la columna de la derecha sólo se muestra en la página inicial. Entonces, al navegar por otros enlaces, Joomla automáticamente 'borra' dicha columna. Por eso, le había puesto ese ancho a las columnas de la izquierda, para que ocupen todo el ancho posible. ¿Me podrías explicar cómo hacer para que, poniéndole el ancho de 100%, se note bien? O sea, que no se descuadre.

Muchas gracias por tu atención.

PD: Los que tienen ancho de 100% son las tablas de la primera columna. La columna de la derecha tiene un tamaño fijo de 200px.

[Mikmoro]

Si no le pones ningún width, como son divs (y no tablas), ocuparán el 100% del espacio disponible, siempre que no estén flotadas. Este es uno de los problemas que puedes evitar con el sistema que te decía: pones primero la columna de la derecha flotada a la derecha, y luego pones la de la izquierda sin flotar y sin width, de esta manera, la de la izquierda se deberá ajustar al espacio disponible.

[canon882]

Pues, tienez razón. Al no darle dimensiones, me ocupa todo, sin embargo, vuelve a aparecer dicho problema de que la segunda tabla de la primera columna se salta hasta el final de la primera tabla de la segunda columna.

[Mikmoro]

Amigo, no tiene mucho sentido que intente ayudarte si no das la información como es. Hablas de tablas y dices que lo haces con divs; luego muestras el código y sólo pones divs; luego yo te doy esta respuesta (que no sé si has leido):

Si no le pones ningún width, como son divs (y no tablas),

y finalmente dices que no te funciona como te he indicado, y cuando entro a tu pagina a ver qué es lo que tienes, me encuentro con que en realidad SÍ son tablas dentro de los divs, por lo que, como te había explicado en el comentario de arriba, mi solución funcionaría en caso de ser divs y no tablas.

Así no se puede hacer mucho. Hasta la vista.