Ayuda moldeando diseño hibrido

neodani · #1 (**permalink**) 15/11/2009, 15:04

Buenas,

Estoy intentando moldear un diseño híbrido, pero no consigo arreglármelas para conseguir lo siguiente:

Son 3 columnas, izq y derecha son de tamaño fijo y lo que es liquido es la parte central, a la que le he dado un min-width:500px; para que no se haga extremadamente pequeña.

El problema que estoy teniendo es que cuando encojo la pantalla horizontalmente, la columna derecha sobrepasa tanto la columna central como la izquierda. Me gustaría limitar esto, y que si se encoge la ventana hasta el minimo de la zona central 500px, la columna derecha no se sobrepusiera por encima de estas capas.

¿Sabéis que modificaciones debo realizar?

Muchas gracias de antemano!

Dejo el código que estoy utilizando:

Código css:

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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</title>
<style type="text/css">
 
body{
margin:0;
padding:0;
line-height: 1.5em;
}
 
b{font-size: 110%;}
em{color: red;}
 
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
 
#topsection h1{
margin: 0;
padding-top: 15px;
}
 
#contentwrapper{
float: left;
width: 100%;
}
 
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
min-width:500px;
}
 
#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
 
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
 
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
 
#footer a{
color: #FFFF80;
}
 
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
 
</style>
 
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
 
</head>
<body>
<div id="maincontainer">
 
<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</h1></div></div>
 
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>
 
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>230px</em></b> <script type="text/javascript">filltext(20)</script></div>
 
</div>
 
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>
 
<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
 
</div>
</body>
</html>

kseso? · #2 (**permalink**) 15/11/2009, 17:47

prueba añadiendo un min-width a la columna central. Recomendable que también añadas un max-width (para evitar "desparrames": lo contrario al colapso

).
No olvides que debes añadir el equivalente para ie:

Código css:

Ver original#contenedor {
  max-width: 1200px;
  width: expression(document.body.clientWidth > 1201? "1200px": "auto");
min-width: 300px;
  width: expression(document.body.clientWidth < 301? "300px": "auto" );
}

neodani · #3 (**permalink**) 16/11/2009, 09:10

Cita:

Iniciado por kseso?

prueba añadiendo un min-width a la columna central. Recomendable que también añadas un max-width (para evitar "desparrames": lo contrario al colapso

).
No olvides que debes añadir el equivalente para ie:

Código css:

Ver original#contenedor {
  max-width: 1200px;
  width: expression(document.body.clientWidth > 1201? "1200px": "auto");
min-width: 300px;
  width: expression(document.body.clientWidth < 301? "300px": "auto" );
}

Hola Kseso? muchas gracias por responder.

El ID que comentas en tu post no lo veo en mi codigo :S

Sobre agregar el min-width y max-width en la columna central, lo hice

Código css:

Ver original#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
min-width:500px;
max-width:700px;
}

Pero sigo teniendo el mismo problema, la columna derecha se monta sobre la central y la izquierda al reducir la ventana.

Os he dejado el código completo por si queréis lanzarlo y ver el problema realmente.

Muchas gracias de antemano!

kseso? · #4 (**permalink**) 16/11/2009, 09:44

Ah, vale. Con las prisas esta mañana no entré a mirar tu código.

Creo que lo que tienes es una estructura de falsas columnas equilibradas (igual altura). Y para ello sigues una técnica de encadenado de cajas.

Mira a ver si esta otra forma la encuentras menos afectada de "divitis".

Sólo tienes que cambiar en #contenedor el valor de width por un min-width apropiado. Y por supuesto, retirar el "margin: 0 auto" que ya será innecesario.

Nos cuentas.

neodani · #5 (**permalink**) 16/11/2009, 11:09

Cita:

Iniciado por kseso?

Ah, vale. Con las prisas esta mañana no entré a mirar tu código.

Creo que lo que tienes es una estructura de falsas columnas equilibradas (igual altura). Y para ello sigues una técnica de encadenado de cajas.

Mira a ver si esta otra forma la encuentras menos afectada de "divitis".

Sólo tienes que cambiar en #contenedor el valor de width por un min-width apropiado. Y por supuesto, retirar el "margin: 0 auto" que ya será innecesario.

Nos cuentas.

Funcionó perfecto, muchas gracias kseso?