Foros del Web » Creando para Internet » CSS »

Como hace una capa al lado de otra

Estas en el tema de Como hace una capa al lado de otra en el foro de CSS en Foros del Web. Tengo 3 capas una grande de 560px y otra dos iguales de 265px. Dentro de la grande han de estar las dos pequeñas una al ...
  #1 (permalink)  
Antiguo 11/05/2010, 06:45
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Como hace una capa al lado de otra

Tengo 3 capas una grande de 560px y otra dos iguales de 265px.
Dentro de la grande han de estar las dos pequeñas una al lado derecho y la otra al lado izquierdo.
Es para hacer dos columnas de texto y fotos dentro de la capa grande, separadas por una linea vertical.
No puedo utilizar el float: left; o float: right; porque se me rompe toda la estructura y tampoco posiciones absolutas los textos van a ser de distinta longitud.
Hay alguna forma de hacerlo en css.
---------------------
Son estas:
Código PHP:
#centro { 
width 560px
border:#000 solid 1px;

#izquierda { 
width265px
border:#FC0 solid 1px;
}
#derecha { 
width265px
border:#FC0 solid 1px;

Código PHP:
<div id="centro">

<
div id="izquierda">
............
...........
..........
</
div>
<!-- 
Aqui ira la linea vertical que no se en css como hacerla -->
<
div id="derecha">
............
...........
..........
</
div>

</
div
  #2 (permalink)  
Antiguo 11/05/2010, 07:43
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.124
Antigüedad: 13 años, 11 meses
Puntos: 66
Respuesta: Como hace una capa al lado de otra

En la parte html tendrias que poner primero la capa derecha y luego la izquierda y en el css flotarlos como corresponda si pones la izquierda primero y luego la derecha se marea todo el asunto.

<div class="derecha">

</div>

<div class="izquierda">

</div>

.derecha{
float:right;
}

.izquierda{
float:left;
}


se me olvidaba seguramente al flotar las capas hijas de centro te de la impresion que se salen de ella y si, es asi, para ver lo que te digo flota las dos capas que quieres y a centro aplicale un borde y veras por donde pasa, para solucionar esto deberas aplicarle este estilo a centro

.centro{
clear:both;
}

y la linjea vertical la podrias hacer con alco como

.derecha{
border-left:#ffffff solid 1px;
}

o añadir una capa central si lo quieres mas bonito pero recuerda que en la partehtml tendrias que poner derecha izquierda central, y no izquierda central derecha como pareceria logico

Última edición por juanito1712; 11/05/2010 a las 07:50
  #3 (permalink)  
Antiguo 11/05/2010, 12:02
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como hace una capa al lado de otra

Muchas gracias me ha funcionado muy bien.
Tengo otra duda y si no te importa a ver si me la puedes aclarar como esta.

Es otro caso en el que tengo 3 capas para dividir en 3 columnas
izquerda centro y derecha.
No es igual al de antes.

A veces me falla, se montan y no se la causa es esta.

Código PHP:
#izquierda { 
width197px
padding0 0 0 8px
floatleft;
}
#centro { 
width 560px
padding0 0 0 8px
floatleft;

#derecha { 
width197px
padding0 8px 0 0
floatright;


Las llamo asi

<div id="izquierda">
............
...........
..........
</div>

<div id="centro">
............
...........
..........
</div>

<div id="derecha">
............
...........
..........
</div>

Que puedo tener mal.
Me debe faltar algo en el css.
  #4 (permalink)  
Antiguo 11/05/2010, 13:19
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 15 años, 5 meses
Puntos: 10
Respuesta: Como hace una capa al lado de otra

¿Es posible que esas 3 capas esten dentro de otra más grande?
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL
  #5 (permalink)  
Antiguo 12/05/2010, 06:05
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como hace una capa al lado de otra

Si efectivamente esas tres capas estan dentro de otra mas grande que las contiene.
Esa capa tiene una dimension de 995px.
  #6 (permalink)  
Antiguo 12/05/2010, 08:06
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 15 años, 5 meses
Puntos: 10
Respuesta: Como hace una capa al lado de otra

Cuando dices a veces me falla. ¿Te refieres a cuando lo ves en IE o en Firefox? Es muy posible que lo veas en Firefox bien, y en IE mal, las capas flotantes no suelen funcionar bien en IE. Al menos hasta la version 7. El CSS que tienes deberia funcionar correctamente. Si no es así, comprueba si algun elemento que tengas dentro de las cajas, o fuera, esta provocando que estas se descoloquen.

Puede ser que tengas una imagen dentro de alguna caja, y esta tenga un margen.

Por otro lado, prueba a utilizar algun reset.css, hojas de estilos que te eliminan todo rastro de los valores por defecto de los navegadores, así generalmente, suele ser mucho más limpio el diseño.

Un saludo,
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL
  #7 (permalink)  
Antiguo 13/05/2010, 01:33
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como hace una capa al lado de otra

Muchas gracias por vuestras ayudas.

Etiquetas: lado, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:34.