Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/07/2009, 11:48
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
.clases y div en joomla!

Hola comunidad!
Expongo este problema en la creación de un template para joomla!. Template que comencé desde cero y al que pienso convertir en mi primer pagina dinámica.

Tengo un div contenedor padre de #header #izquierda y #contenido:

#principal {
Margin-top:0;
Margin-left:auto;
Margin-right:auto;
width: 1024px;
_text-align:center;
_text-align:left;
}


... un encabezado:

#principal #header {
padding-bottom:0px;
margin-bottom:0px;
padding: 10px;
padding-bottom:0px;
background-image: url(../extras/cabecera.jpg);
background-repeat:no-repeat;
width: 1024px;
height:345px;
}


... un div izquierdo:

#principal #izquierda {
padding-top:10px;
margin-top:0px;
background-color:#FFFFFF;
float: left;
width: 339px;
margin-left:112px;
}


.. y un div que contiene los articulos

#principal #contenido {
background-image:url(../extras/fondoderecha.jpg);
padding-top:10px;
padding-left:49px;
padding-right:55px;
margin-top:0px;
background-color:#FFFFFF;
float: left;
width: 357px;
}


Hasta aquí todo funciona perfecto.


ahora en el div #contenido tengo las siguientes clases:

.componentheading
.blog
.contentpaneopen
.contentheading
.small
.createdate
.modifydate
.article_separator
.article_column
.readon

Lo que necesito es que el articulo numero 2 se posicione debajo del articulo numero 1. Que el articulo numero 3 se posicione debajo del articulo numero 2. Y así sucesivamente.
Y para ello hago lo siguiente:
.contentpaneopen {float:left; clear:both;}
.article_separator {float:left; clear:both;}


Pero el articulo numero 3 se sigue flotando a la derecha del articulo numero 2 y si siguiera publicando artículos estos seguirían apareciendo de a dos por vez, en vez de uno debajo del otro.

¿Cual es el problema se preguntarán?
Que necesito que la columna #contenido no cambie el ancho (width) y si aparecen dos artículos por vez se modifica el ancho.

Lo que obtengo por resultado es una columna del doble de ancho, una barra de desplazamiento horizontal y un diseño que habla de lo inexperto que soy en el manejo de las propiedades float y clear.