Foros del Web » Creando para Internet » CSS »

problemas de divs de 2 columnas

Estas en el tema de problemas de divs de 2 columnas en el foro de CSS en Foros del Web. buenas. estoy maquetando divs de 2 columnas. cuando cambio de resolucion del monitor (800 x 600), el div de la columna derecha se desplaza hacia ...
  #1 (permalink)  
Antiguo 29/04/2010, 16:21
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Pregunta problemas de divs de 2 columnas

buenas. estoy maquetando divs de 2 columnas. cuando cambio de resolucion del monitor (800 x 600), el div de la columna derecha se desplaza hacia el otro lado y cuando reduzco de tamaño la ventana del navegador sucede lo mismo.

este es mi codigo css.

Código CSS:
Ver original
  1. div#column_izquierda{
  2.     width:150px;
  3.     height:100%;
  4.     float:left;
  5. }
  6.  
  7. div#column_derecha{
  8.     width:990px;
  9.     height:auto;
  10.     float:left;
  11.     padding-left:2px;  
  12. }

saludos.
  #2 (permalink)  
Antiguo 29/04/2010, 16:46
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problemas de divs de 2 columnas

claro, "porque no entra" en el ancho de tu nueva resolución.
¿Cual es el ancho del padre de las dos columnas?

ancho total de #column_izquierda = 150px
ancho total de #column_derecha = 992px
total = 1142px

tienes dos alternativas.
- Trabajar con un contenedor de 800px y achicar el ancho de tus columnas de modo que sumadas (margin, border y padding suman también) no sobrepasen los 800px.
- Crear un script.js que modifique el ancho de las columnas segun la resolución.
1
2
Recuerda limpiar los floats dando overflow:hidden; al padre de los elementos flotados.
y dando layout a IE con p.ej. zoom:1; en una hoja de estilos a parte (y llamando a esta con comentarios condicionales para que tu css valide)

Saludos
  #3 (permalink)  
Antiguo 29/04/2010, 17:05
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: problemas de divs de 2 columnas

gracias por responder. lo que pasa es k me dieron un boceto de 1312 x 1115px y tuve mostrar en el div contenedor un ancho pero en porcentaje (%).

ya que mencione del tamaño de los bocetos, mi pregunta es la siguiente:

- es necesario maquetear una web si el boceto tiene 800 x 600 ó 1000 x 1000px ?
- por regla, cuando uno maqueta una web, es necesario colocar el contenedor principal y despues colocar los demas contenedores o no tiene qu ser neecsariamente asi.

Código HTML:
Ver original
  1. <div id="contenedor">
  2. <div id="cabecera"></div>
  3. <div id="cuerpo"></div>
  4. <div id="footer"></div>
  5. </div>

- porque es necesario limpiar los floats utilizando overflow:hidden. supongo que sera para ocultarlo.

saludos.

Última edición por esaenz22; 29/04/2010 a las 17:06 Razón: correccion.
  #4 (permalink)  
Antiguo 29/04/2010, 18:07
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problemas de divs de 2 columnas

Cita:
Iniciado por esaenz22 Ver Mensaje
gracias por responder. lo que pasa es k me dieron un boceto de 1312 x 1115px y tuve mostrar en el div contenedor un ancho pero en porcentaje (%).
entonces puedes trabajar con porcentajes en tus columnas pero ten en cuenta que cuando un elemento no encuentra lugar simplemente "baja" hasta que lo encuentre

Cita:
Iniciado por esaenz22 Ver Mensaje
- por regla, cuando uno maqueta una web, es necesario colocar el contenedor principal y despues colocar los demas contenedores o no tiene qu ser neecsariamente asi.
No necesariamente porque puedes trabajar con posiciones relativas y absolutas, pero si que es más ordenado para ti.

Cita:
Iniciado por esaenz22 Ver Mensaje
- porque es necesario limpiar los floats utilizando overflow:hidden. supongo que sera para ocultarlo.
Lo que hace es que tu elemento contenedor siempre se vea y no como suele pasar que no se te muestra, aquí te lo van a explicar mejor que yo.

Un saludo
  #5 (permalink)  
Antiguo 30/04/2010, 09:22
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: problemas de divs de 2 columnas

gracias por responder.

en lo que te pregunte sobre el tamaño del boceto, cuando hice divs de 2 columnas, el primer div de columna izquierda que tenia ancho de 170px y el div de columna derecha tenia un ancho de 100%. pero cuando reduci el tamaño de la ventana del navegador, el div de la columna derecha se desplazo hacia abajo.

alli me dijiste que cuando un elemento no encuentra lugar simplemente "baja" hasta que lo encuentre.

en este caso, que dimensiones puedo trabajar ?.

este es mi css.

Código CSS:
Ver original
  1. div#contenido_panel{
  2.     width:100%;
  3.     height:800px;
  4.     margin:0 auto;
  5. }
  6.  
  7. div#column_izquierda{
  8.     width:150px;
  9.     height:100%;
  10.     float:left;
  11.     overflow:hidden;
  12. }
  13.  
  14. div#column_derecha{
  15.     width:400px;
  16.     height:auto;
  17.     float:left;
  18.     overflow:hidden;
  19.     padding-left:2px;  
  20. }

el html.

Código HTML:
Ver original
  1. <div id="contenido_panel">
  2. <div id="column_izquierda">texto</div>
  3. <div id="column_derecha">
  4.   <div id="titulo_fecha">Fecha: Jueves 18 de marzo de 2010 </div>
  5. </div>
  6. </div>

en la 2da pregunta que he planteado.

- por regla, cuando uno maqueta una web, es necesario colocar el contenedor principal y despues colocar los demas contenedores o no tiene que ser necesariamente asi.

osea, si yo coloco un div contenedor y dentro de el div coloco la cabecera, el cuerpo y el pie o el footer, necesariamente se debe seguir ese orden o yo puedo colocar primero la cabecera y despues el div contenedor, el cuerpo y despues el footer.

saludos.

Última edición por esaenz22; 30/04/2010 a las 09:41 Razón: correccion.

Etiquetas: columnas
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:11.