problemas de divs de 2 columnas

[esaenz22]

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:

div#column_izquierda{
    width:150px;
    height:100%;
    float:left;
}
 
div#column_derecha{
    width:990px;
    height:auto;
    float:left;
    padding-left:2px;   
}
 

saludos.

[cristian_cena]

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

[esaenz22]

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:

<div id="contenedor">
<div id="cabecera"></div>
<div id="cuerpo"></div>
<div id="footer"></div>
</div>
 

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

saludos.

[cristian_cena]

Iniciado por esaenz22

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

Iniciado por esaenz22

- 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.

Iniciado por esaenz22

- 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

[esaenz22]

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:

div#contenido_panel{
    width:100%; 
    height:800px;
    margin:0 auto;
}
 
div#column_izquierda{
    width:150px;
    height:100%;
    float:left;
    overflow:hidden;
}
 
div#column_derecha{
    width:400px;
    height:auto;
    float:left;
    overflow:hidden;
    padding-left:2px;   
}
 

el html.

Código HTML:

<div id="contenido_panel">
<div id="column_izquierda">texto</div>
<div id="column_derecha"> 
  <div id="titulo_fecha">Fecha: Jueves 18 de marzo de 2010 </div>
</div>
</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.