Maquetación a 3 columnas

pixel1 · #1 (**permalink**) 13/01/2012, 13:34

Hola estoy maquetando un proyecto a 3 columnas, el punto es que necesito que la columna central siempre tenga un tamaño fijo: 1024px y las columnas izquierdas y dercha se puedan estirar dependiendo la resolucion; estoy haciendo una prueba así.

Código HTML:

<div id="container1">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2</div>
    <div id="col3">Column 3</div>
</div>

Con el siguiente css:

Código HTML:

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

El problema es que como todas las columnas están definidas en porcentaje, si cambio la resolucion entonces todo crece en proporcion.

kseso? · #2 (**permalink**) 13/01/2012, 13:55

1024 px la central? Algo mucho me parece, pero bueno, esa no es la cuestión.

Izquierda y derecha con anchura mínima (min-width) y flotadas. La central con los 1024px.
La caja contenedora con min-width que será la suma de las tres anteriores.

pixel1 · #3 (**permalink**) 13/01/2012, 14:04

Gracias el asunto es que necesito que queden centrados, y haciendolo asi, todo se carga a la izquierda

emprear · #4 (**permalink**) 13/01/2012, 17:57

podes darle un text-align: center al body, y corregir los divs con text-align: left
Al margen de eso, como yaalgo te indicaron, ese esquema en cualquier resolución menor o igual a 1024px de ancho, es inaplicable

Saludos

C2am · #5 (**permalink**) 13/01/2012, 21:19

Cita:

Iniciado por emprear

podes darle un text-align: center al body, y corregir los divs con text-align: left

Hola emprear, ¿estas seguro que así se puede centrar el contenido del body?
Yo tenia entendido que en todo caso sirve para IE, pero no para el resto de navegadores, además de que es para alinear texto, o en todo caso declarar display:inline o algo parecido a cada div. No estoy seguro y seguramente estoy equivocado por eso te pregunto. También es posible que no haya comprendido la consulta de pixel1.

Bueno, por las dudas, quitandole el flotado al "container1" y con un margin: 0 auto; ya tendria su centrado, por supuesto, con las modificaciones recomendadas por kseso?.

Saludos

emprear · #6 (**permalink**) 13/01/2012, 22:35

Si se puede, es el fix que habitualmente se usaba para IE6, que no respetaba el tradicional margin: 0 auto; que habitualmente usamos, pero centra horizontalmente los elementos en linea.

Para el caso que se planteó, algo asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
html, body{
margin:0;
padding: 0;
border: none;
}
 
body{
text-align: center;
}
 
div {
text-align: left;
display:inline-block;
}
 
#col1{
background: green;
float:left;
}
 
#col2{
width: 1024px;
background: cyan;
float:left;
}
 
#col3{
background: yellow;
float:left;
}
 
/*]]>*/
</style>
</head>
<body>
<div>
<div id="col1">
columna 1 xxxxxxx
</div>
<div id="col2">
columna 2 1024px
</div>
<div id="col3">
columna 3 xx
</div>
</div>
</body>
</html>

De todas formas está muy limitado el esquema por lo del div de 1024px

Saludos

ocesitaro · #7 (**permalink**) 13/01/2012, 23:36

Cita:

Iniciado por pixel1

Hola estoy maquetando un proyecto a 3 columnas, el punto es que necesito que la columna central siempre tenga un tamaño fijo: 1024px y las columnas izquierdas y dercha se puedan estirar dependiendo la resolucion; estoy haciendo una prueba así.

Código HTML:

<div id="container1">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2</div>
    <div id="col3">Column 3</div>
</div>

Con el siguiente css:

Código HTML:

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

El problema es que como todas las columnas están definidas en porcentaje, si cambio la resolucion entonces todo crece en proporcion.

no se puede usar los tamaño que quieres, en una laptop no se va a ver bien, ni en una pantalla de oficina, solo ve va a ver bien en una pantalla de un diseñador.

el estandar de ancho es 1024 y eso descuentale es scroll ponle 980.
lo que podrías hacer si quieres ocupar toda la pantalla
ponerle algo parecido a esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
html , body{ margin:0; width:100%;}
#contenedor{width:100%; background-color:#F00; min-width:1000px;}
.flotante{float:left;}
.limpiar{clear:both;}
#izquierda{
width:30%;min-width:300px;}
#centro{
width:40%;min-width:400px;}
#izquierda{ background-color:#0F0;}
#centro{ background-color:#03C;}
#derecha{ background-color:#CF0; width:30%;}
</style>
</head>

<body>
<div id="contenedor">
<div class="flotante" id="izquierda">contenido izquierda</div>
<div class="flotante" id="centro">contenido centro</div>
<div class="flotante" id="derecha">contenido derecha </div>
<div class="limpiar"></div>
</div>
</body>
</html>

emprear · #8 (**permalink**) 14/01/2012, 06:54

Cita:

Iniciado por ocesitaro

no se puede usar los tamaño que quieres, en una laptop no se va a ver bien, ni en una pantalla de oficina, solo ve va a ver bien en una pantalla de un diseñador.

No hay ningún impedimento para que un los tamaños que propone el ejemplo funcionen en una laptop (el problema sigue siendo la necesidad de una columna central de 1024px fijos), y las pantallas de los diseñadores son iguales a la de todo el resto de los mortales. Finalmente te diría que el "area segura" para resoluciones de 1024 x 768 es de, como mucho, 975px y no de 980px

Saludos

kseso? · #9 (**permalink**) 14/01/2012, 10:03

Olvide mi sugerencia anterior.
Eta sólo una breve indicación de por dondre podría enfocarlo. Supuse, creo que mal, que tanto su planteamiento del layout como su conocimiento de css estarían más avanzados.

Creo, por cómo se ha desarrollado el hilo, que debería definir mejor qué y porqué quiere hacer y cómo se debería comportar en situaciones distintas su layout.
Como sugerencia, los valores mínimos y máximos, así como los relativos (%) a la ventana real.
Lo anterior, junto al uso del display: inline-block frente al flotado y lo ya dicho, un planteamiento en sus anchuras seguramente le faciliten el trabajo.

ocesitaro · #10 (**permalink**) 14/01/2012, 16:23

Cita:

Iniciado por emprear

No hay ningún impedimento para que un los tamaños que propone el ejemplo funcionen en una laptop (el problema sigue siendo la necesidad de una columna central de 1024px fijos), y las pantallas de los diseñadores son iguales a la de todo el resto de los mortales. Finalmente te diría que el "area segura" para resoluciones de 1024 x 768 es de, como mucho, 975px y no de 980px

Saludos

me refiero al 1024 de ancho