esquema 3 columnas y Posiciónamiento

jakijem · #1 (**permalink**) 31/08/2014, 09:10

No acabo de entender el modelo de posicionamiento en CSS.

He montado una pagina de tres columnas, las tres de tamaño fijo, la izquierda con float:left, la derecha con float:right, y la central sin nada, donde lo he posicionado todo (casi todo) con position: absolute, pero he leido que esto no es correcto. Además, a la columna central, si le pongo un width=100% el texto se pasa a la columna de la derecha, y si le pongo un width:500px; (por ejemplo) se queda en ese tamaño aunque se amplie el monitor, dejando un espacio entre la columna central (que supere los 500px y la columna de la derecha... no se si me explico...

imagino que deberi ser algo mas flexible, con la columna central flexible, pero no se muy bien como hacerlo, ¿quizas con el flex-box model? que tipo de position?

Y si es asi, ¿como posiciono los elementos graficos sueltos, en una posición determinada?

imaginad un esquema asi:

¿Como lo haria?

darala · #2 (**permalink**) 02/09/2014, 06:12

Hola jakijem, yo lo haría así, espero que te sirva:

Código HTML:

Ver original<body style="width:900px">
 
<div style="height:500px;float:left;width:100px;background:black">
</div>
 
<div style="background:yellow; height:500px; float:left;  font-family:Arial;width: 73%;margin-left: 20px; padding:10px;color:black;">
 
Hola, este es un contenido de ejemplo por David Randulfe para ForosDelWeb
 
</div>
 
<div style="height:500px;float:right;background:red;width:100px;"
</div>
 
</body>

jakijem · #3 (**permalink**) 02/09/2014, 09:38

Si, mas o menos, pero imagina que la columna central debe ocupar todo el espacio que no ocupen las dos columnas exteriores, y que además se adapte a cambios de ancho...

Si estableces un % fijo, aunque lo ajustes, cuando la pantalla sea mas grande

por ejemplo, si tienes un ancho de 1280px, y le quitas 100px por cada lado, te quedan 1080px, lo que supone un 84,375%, y podrias ajustarlo asi, pero si pasas a un monitor con una resolución de 1600px, ese porcentaje ya no es correcto, porque 1400px (1600 - 200) ya no es el 84%, no se si me explico...