Ayuda Acomodando divs

[gVenom]

Saludos.

Bueno yo de nuevo aqui batallando con la posición de los div. Me esfuerzo para no usar la posición absoluta pero como cuesta.

En esta página http:///vtx-cr, como verán trato de acomodar las cajas con las imagenes y texto de forma que me queden de 4 en 4 por linea. pero no he logrado mi objetivo.

el css de el contenedor de todo el centro es este:

Código CSS:

#centro_gallery{ /*este contiene todo lo de adentro*/
    position:relative;
    top:0px;
    width:780px;
    height:100%;
}
#categorias_txt{  /* este contiene el texto de las categorias*/
    position:relative;
    width:168px;
    height:100%;
    top:26px;
    left:26px;
    float:left;
}
#templates_container{  este contiene las cajas con los templates*/
    position:relative;
    width:545px;
    height:100%;
    top:26px;
    left:35px;
    marging-right:15px;
}
 

Ahora los div que contienen las imagenes y el texto que se ve, sus 4 primeros div estan así:

Código CSS:

#box1{
    height:218px;
    width:117px;
    float:left;
}
 
#box2{
    height:218px;
    width:117px;
    left:10px;
    float:left;
}
#box3{
    height:218px;
    width:117px;
    left:10px;
    float:left;
}
#box4{
    height:218px;
    width:117px;
    left:10px;
    float:right;
}
#clear{ clear:both;}
 

y ahi ven el resultado, nada que ver.
Curiosamente abajo se acomodan mejor que arriba y no se porque. Los de abajo estan así:

Código Css:

#box5{
    position:relative;
    height:218px;
    width:117px;
    margin:10px 10px 10px 0px;
    float:left;
}
#box6{
    position:relative;
    height:218px;
    width:117px;
    margin:10px 10px 10px 0px;
    float:left;
}
#box7{
    position:relative;
    height:218px;
    width:117px;
    margin:10px 10px 10px 0px;
    float:left;
}
#box8{
    position:relative;
    height:218px;
    width:117px;
    margin:10px 10px 10px 0px;
    float:right;
}
 

arriba les quite el position :relative porque me habian dicho por aqui que el float y el relative no se llevan muy bien.

El otro punto es que no entiendo muy bien lo de que el div valla creciendo segun el contenido, yo les puse height:100% a los contenedores grandes, pero parece que no estan trabajando.

Bueno espero haber sido claro , este brete me tiene cansado

[gVenom]

Bueno acabo de ver tambien que me esta reconociendo solo como un 70% del ancho del

#templates_container{ este contiene las cajas con los templates*/
position:relative;
width:545px;

no esta usando el ancho indicado, de ahi que tire uno de los div box para abajo

[Aresillo]

Perdona gVenom,
pero no se solucionaría todo con un sólo código para todas las cajas:

.box{
height:218px;
width:117px;
margin:10px 10px 10px 0px;
}

Si haces esto, todas las cajas deberían ir una al lado de la otra y saltar de línea cuando topa con algo en el flujo del documento.
Si lo tienes medido para cuatro, así debería funcionar.

[gVenom]

Iniciado por Aresillo

Perdona gVenom,
pero no se solucionaría todo con un sólo código para todas las cajas:

.box{
height:218px;
width:117px;
margin:10px 10px 10px 0px;
}

Si haces esto, todas las cajas deberían ir una al lado de la otra y saltar de línea cuando topa con algo en el flujo del documento.
Si lo tienes medido para cuatro, así debería funcionar.

jaja, pues no se, yo lo pense asi pero no supe como hacerlo. Pero si le pongo .box, tengo que ponerle al html <class="box"> cierto? y yo a algunos ya les tengo el style algo, no afecta?

[Aresillo]

pues haz un estilo para las cajas que englobe el que tenías y las nuevas especificaciones...

No sé si se pueden poner dos clases...

Lo que seguro que puedes hacer es pillarlo mediante selectores.
Por ejemplo, yo las cajas las metería en una lista de cuatro. y después otra y así...
entonces sería fácil poner:
#nombredivgrande ul li {*/y las especificaciones que te decía.../*}

Sino a ver si te lo puedo mirar...sino, se lo digo a willy!

[gVenom]

oye tenias razon con eso, ya las cajas se acomodanbien, ahora queda el detalle de que el div que contiene esos box no reconoce el ancho que le puse, solo un 70 % mas o menos.

[Aresillo]

no puedo mirarlo el la web porque la música me pone de los nervios!!

Te refieres a la galería central?

[Aresillo]

A este div, añadele esto:

#templates_container {
/*lo que ya tienes*/
float:left;
}

Y a este, esto:
#bottom {
/*lo que tenías*/
clear:both;
}

Y te explico, en el primer caso lo que tenías es un ancho predeterminado en el div de la izda, al ponerle el float:left entonces, el documentos sigue su flujo. Primero la columna de la izda, después la de la dcha.

El segundo cambio, es porque al realizar el anterior el pie o bottom como lo tienes tu, se subía. Al ponerle clear:both, salta de línea porque quiere decir que se queda libre por ambos lados ese div.

[gVenom]

Cual música? la de mi flash? jaja, si tengo que cambiarla y ponerle un stop por ahi, pero eso es facil. Ok aqui en esta parte:

Código Css:

#centro_gallery{
    position:relative;
    top:0px;
    width:780px;
    height:100%;
}
#categorias_txt{
    position:relative;
    width:168px;
    height:100%;
    top:26px;
    left:26px;
    float:left;
}
#templates_container{
    position:relative;
    width:557px;
    height:100%;
    top:26px;
    left:45px;
    right:10px;
}
 

centro_gallery contiene a los dos que estan abajo, categorias es el div con el texto y las categorias de diseño, y esta a la iz de templates container que es el que contiene los box, el ancho queda apenas con la página, pero en la web no lo reconoce, y no caben los box a lo ancho, solo deja 2. Miralo en la página , te voy a quitar el flash mientras jeje

[Aresillo]

no te preocupes, lee el mensaje anterior que ya te lo solucionaba.
Y lo de las música te lo he bloqueado

[gVenom]

Oye excelente, justo como lo dices. Gracias Aresillo, ahi vamos aprendiendo poco a poco.

[Aresillo]

De nada, un placer