posicionamiento div

Nano-rosario · #1 (**permalink**) 21/10/2011, 10:01

Hola, lo que necesito son 3 columnas:

la 2º y la 3º de 330 px c/u y la 1º que ocupe el resto del tamaño, y no menos de 300px...

lo que tengo es,html:

<div id="container">
<div id="container_1">
{% placeholder "main_1" %}
</div>
<div id="container_2">
{% placeholder "main_2" %}
</div>
<div id="container_3">
{% placeholder "main_3" %}
</div>
<br class="clearBoth" />
</div>

css:

#container {
margin:0 auto;
margin-left: 90px;
margin-right: 20px;
margin-top: 10px;
padding-top:10px;
background:white;
border-radius: 10px;
-moz-border-radius: 10px;
}
#container_1 {
float:left;
min-width:300px;
}
#container_2 {
float:left;
width:330px;
}
#container_3 {
float:left;
width:330px;
}

Lo que esta pasando es que container_1 se esta ocupando el 100% tendria que ser algo como 100%-660 px ( tamaño de los 2 div).
Y en el caso de que se redimensione la ventana, lleva los div abajo, yo quiero que ponga la barra horizontal sino cambia la apariencia de la pagina...

Desde ya muchas gracias
Saludos
Mariano

Oscar_Hidro · #2 (**permalink**) 21/10/2011, 11:13

Que tal hermano, no entendi muy bien por q el contenedor principal "container", no le especificas un largo de pagina. Si lo quieres de pantalla completa ponlo en widht:100%; o por lo que veo en las medidas del ancho de los divs, supongo que quieres una medida de 960px de largo para todo el documento.

Yo te recomiendo usar dos bloques dentro del "container". El bloque de la izquierda sera para el container_1 y lo vas a definir como flotante a la izquierda con un tamaño de 300px.

El segundo bloque, el de la derecha sera para container_2 y container_3. Flota los container como left y right respectivamente y definelos con 330px cada container.

Como dato importantisimo, si defines un borde en cada bloque, automaticamente te lo desplazará hacia abajo por que ha ocupado mas espacio del que tiene. Lo mismo pasa con el margin. Simplemente aqui es definir que el largo de un div anidado no sea mayor al div donde se anida. En pocas palabras, es darle espacio para que cresca.

Y como dato tambien muy importante, en los divs donde vas a anidar, dales la propiedad

Código CSS:

Ver originaldisplay:inline-block;

para que te forme los elementos en linea.

Oscar_Hidro · #3 (**permalink**) 21/10/2011, 11:23

Es decir, para el bloque de la izquierda(para container_2 y container_3) vas aplicar la propiedad del display, para que se forme des pues del bloque de la derecha(container_1).

Saludos!

Nano-rosario · #4 (**permalink**) 21/10/2011, 14:43

Ahi se ven las 3 columnas, yo lo que quiero es que segun la resolucion o el zoom se valla aumentando la columna 1 , pero que no sea menor a 300 px,

y las columnas 2 y 3 se queden en 330 px porque van a ir banner y si las pongo a con % se agrandan las columnas y los banner quedan mas chicos que las columnas, por eso necesito un tamaño estatico para esas dos columnas

Oscar_Hidro · #5 (**permalink**) 21/10/2011, 14:59

No termino por entender cual es la función de que la columna 1 aumente su tamaño, eso si de plano no o entendi hermano. Y tampoco no entendi muy bien el fin de las otras dos columnas.

Se supone que tu en el css vas a establecer una medida estandar para cada columna, como lo hiciste, pero me doy cuenta que no estableciste una medida estandar para tu contenedor principal(#container).

Código CSS:

Ver original#container {
width:960px;
/*margin:0 auto;
margin-left: 90px;
margin-right: 20px;
margin-top: 10px;
padding-top:10px;
background:white;
border-radius: 10px;
-moz-border-radius: 10px; */
}
 
#izq{   width:300px; float:left;}
#der{   width:660px; float:rigth; display:inline-block; }
 
#container_1 {
width:300px;
border:#000000 1px solid;
}
#container_2 {
float:left;
width:328px;
border:#000000 1px solid;
}
#container_3 {
float: right;
border:#000000 1px solid;
width:328px;
}

Código HTML:

Ver original<body>
<div id="container">
    
    <div id="izq">
        <div id="container_1"> 
        {% placeholder "main_1" %} 
        </div>
    </div>
 
    <div id="der">
 
        <div id="container_2"> 
            {% placeholder "main_2" %} 
        </div>
 
    <div id="container_3"> 
        {% placeholder "main_3" %} 
    </div>
    
    <br class="clearBoth" />
    </div>
 
</div>

prueba con algo como esto, donde defines el largo de tu pantalla en el #container con 960px, y sobre eso, defines la medida de cada bloque. Si vas a insertar algun banner, solo es cuestion de que lo metas dentro del div correspondiente en una medida inferior a ese bloque

Oscar_Hidro · #6 (**permalink**) 21/10/2011, 15:00

Lo que esta en gris lo pusiste tu y yo lo comente para no borrarlo, pero no tiene funcion alguna

Nano-rosario · #7 (**permalink**) 21/10/2011, 15:54

Oscar no estoy buscando que #contenedor sea de 960px de ancho.

La idea es la siguiente:

#contenedor tiene el 100% de la resolucion menos el margen izquierdo para el sponsor. (por eso tiene ese margen )

las suma de las 3 columnas tiene que tener el mismo ancho que #contenedor. (100%)

De las 3 columnas quiero que la 2 y la 3 sean estaticas en 330px .
La primera tiene que terminar de completar el espacio que queda de ancho en #contenedor por eso no puede ser estatica porque depende de la resolucion.

Una forma seria:

#container_1 {
width:40%;
}
#container_2 {
float:left;
width:30%;
}
#container_3 {
float: left;
width:30%;
}

asi tengo el 100% pero los div #container_2, #container_3 dependiendo la resolucion cambia el ancho entonces no puedo poner banner porque se altera el aspecto de la pagina....

Oscar_Hidro · #8 (**permalink**) 21/10/2011, 16:06

Entonces lo unico que buscas es que si la resolucion es muy alta, te llene los espacios con la columna container_1?

Oscar_Hidro · #9 (**permalink**) 21/10/2011, 16:09

Tengo entendido, que si excedes el ancho de la pagina, y la resolucion es mas pequeña en tu ordenador, tendras ese tipo de problemas. Seria bueno preguntar en el foro de javascript si hay alguna funcion para lograr este propósito con ayuda de css

Oscar_Hidro · #10 (**permalink**) 21/10/2011, 16:11

O prueba tambien en el container_1 con el "widht: auto;" haber que resultado te da.

IsaBelM · #11 (**permalink**) 21/10/2011, 16:53

el contenedor 1 ha de ser el contenedor de 2 y 3, por lo que quitale el float. este contenedor 1 tendrá un ancho del 100% y min-width: 960px, que es el mínimo total de la suma de los 3 bloques. los contenedores 2 y 3 no pueden estar flotando hacia la izquierda, han de hacerlo hacia la derecha. así que has de invertir el orden en árbol (primero el 3 y luego el 2)

Nano-rosario · #12 (**permalink**) 21/10/2011, 18:39

IsaBelM gracias, de esa forma quedaría pero seria lo mismo que saque el #container_1 y deje solo el #contenedor.

Pero no puedo porque container_1 esta para limitar contenido, en este caso un placeholder de django_cms, y de esa forma se ocuparia el ancho del 100% y me quedaria abajo de los otros 2 contenedores a la derecha....

Soy nuevo en esto pero estoy leyendo lo mas que puedo por todos lados y no le encuentro la solucion,

Saludos

C2am · #13 (**permalink**) 21/10/2011, 22:10

Hola, el orden es el indicado por Isabel, poniendo float:right, en vez de left a 2 y 3.
Si quieres mantener el 1 hazlo, pero recuerda el orden y quitarle el float, ya que el navegador va a ubicar primero el 3, luego el 2 flotado a la derecha junto al 3 si es que hay espacio, y por último en el espacio que quede a la izquierda ubica el 1.

Si pones primero el 1, ocupara todo el ancho y 2 y 3 no tendrán otra que ponerse debajo de 1.
Recuerda, los elementos se van ubicando de acuerdo al orden en que aparezcan en el html.
Saludos

Nano-rosario · #14 (**permalink**) 21/10/2011, 22:34

Ah., ahora entendi... gracias estoy en el celu, mañana lo pruebo, muchas gracias

IsaBelM · #15 (**permalink**) 22/10/2011, 05:48

de nuevo hemos dado un paso hacia atrás.

C2am, tu propuesta no es viable ya que no sabemos al ancho que ocupará container_1. este ancho es dependiente de la resolución de la pantalla.

Nano-rosario, puedes mantener o eliminar container. veamos si lo entiendes con un pequño ejemplo

Cita:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}

#con {
width: 100%;
height: auto;
}

#uno {
min-width: 960px;
width: 100%;
background-color: red;
height: auto;
}

#dos, #tres {
float: right;
width: 330px;
}

#dos {
background-color: yellow;
}

#tres {
background-color: pink;
}
</style>
</head>
<body>
<div id="con">
<div id="uno">Lorem ipsum dolor sit amet, consectetuer adipisc
<div id="tres">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
<div id="dos">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
</div>
</div>
</body>
</html>

de este modo container_1 ocupará de ancho el 100%, pero el efecto será que ocupa un mínimo de 360px y un máximo de n (dependiendo de la resolución de pantalla)

el texto de container_1 ocupa 300px, para que lo tengas como referencia en una resolución de 960px

C2am · #16 (**permalink**) 22/10/2011, 12:34

Hola Isabel
He probado mi propuesta modificando tu propuesta:

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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
 
#con {
width: 100%;
height: 500px;
}
 
#uno {
min-width: 960px;
width: 100%;
background-color: red;
height: 500px;
}
 
#dos, #tres {
float: right;
width: 300px;
height: 500px;
}
 
#dos {
background-color: yellow;
}
 
#tres {
background-color: pink;
}
</style>
</head>
<body>
<div id="con">
        <div id="tres">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
        <div id="dos">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
        <div id="uno">Lorem ipsum dolor sit amet, consectetuer adipisc</div>
</div>
</body>
</html>

Modifique la altura solo para observar mejor, no tiene que ver con el problema a resolver.

Bueno, probandolo en Chrome funciona tal como dije, el div uno ocupa todo el espacio disponible, y al achicar la ventana el div uno tiende a cero, hasta que el ancho es inferior al ancho del div 3, con lo cual el div 2 queda por debajo.
No soy un experto ni mucho menos, pero por lo poco que sé, tengo entendido que al ser el div un elemento de bloque y al no definirse ningun ancho el mismo ocupara todo al ancho disponible, que sería lo mismo que poner 100% ¿o no? (pregunto en serio, no es ironica mi pregunta).

Entonces, primero coloco el div 3 y luego el div 2 (en lo cual coincidimos), y luego coloco el div uno (que ocupara el 100% del ancho disponible que dejaron los div 3 y 2).

Bueno, eso es lo que creo, pero puedo estar equivocado.
Saludos

Nano-rosario · #17 (**permalink**) 22/10/2011, 12:51

Isabel mira lo que pasa cuando le agrandas el texto del div uno eso es lo que no quiero que pase.

Código HTML:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}

#con {
width: 100%;
height: auto;
}

#uno {
min-width: 960px;
width: 100%;
background-color: red;
height: auto;
}

#dos, #tres {
float: right;
width: 330px;
}

#dos {
background-color: yellow;
}

#tres {
background-color: pink;
}
</style>
</head>
<body>
<div id="con">
<div id="uno">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.
Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.
<div id="tres">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
<div id="dos">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
</div>
</div>
</body>
</html>

IsaBelM · #18 (**permalink**) 23/10/2011, 06:56

C2am, tienes razón en lo que comentas. pero en algún lado leí, tampoco hay que hacerle mucho caso, por que en la web no encontramos con muchas falacias, que siempre que sea posible mantener el orden de los elementos, en el mismo orden en el que van a ser mostrado, es conveniente hacerlo

. de cualquier modo tu modificación es totalmente válida

Nano-rosario, eso me pasa por no probarlo antes de servirlo. sólo has de hacer este pequeño cambio

Cita:

<div id="con">
<div id="uno">
<div id="tres">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
<div id="dos">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.
Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.
</div>
</div>