Dejar estatico unos cuadros (Div) mientras se encoje la ventana

saymon · #1 (**permalink**) 03/05/2012, 18:57

Hola Amigos,

Yo tengo un problema en el siguiente codigo a ver si me pudieran dar una ayudita. Esto basicamente tiene 4 cuadros div.
Uno a la izquierda (id="profile-left-col"), uno en el centro que es para el contenido (id="profile-right-col") otro en el lado derecho que es para los ads (id="right-content") y por ultimo el footer (id="subfoot").

Casi todo esta listo, pero tengo un problema que no he resuelto por dias. Cuando encojo la ventana normalmente, el cuadro id="profile-right-col" osea el del cotenido se desplaza hacia abajo y queda debajo del cuadro id="profile-left-col"

Yo lo que quiero es que cuando encojo la ventana y llega al min-width: 840px; del class="fakeWrap" los cuadros se mantengan y se active el scroll bar horizontal, osea que este cuadro de contenido no se desplaze.

Yo puedo editar todo los estilos desde el <div class="fakeWhite"> hacia abajo, pero no los de arriba.

Algunas ideas ?

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style>
 
/* Inicia Estilos Oroginales*/
.fakeWhite {
    height: auto;
    width: 100%;
}
.fakeWhite .fakeWrap {
    height: auto;
    padding: 15px 0;
    width: 100%;
    min-width: 880px;
}
.fakeWhite .fakeWrap .fakeWrapInner {
    height: auto;
    padding: 0 0 0 15px;
}
#profile-left-col {
    float: left;
    height: auto;
    width: 250px;
}
#profile-right-col {
    float: left;
    height: auto;
    padding-bottom: 15px;
    padding-left: 15px;
    width: auto;
    min-width:590px;
}
#right-content {
    background: none repeat scroll 0 0 transparent;
    display: block;
    float: right;
    text-align: center;
    top: 0;
}
#subfoot {
    width: 746px;
    border:solid 1px #009900;
}
/* Finaliza Estilos Oroginales */
 
.fakeWrap { border:solid 1px}
.fakeWrapInner {}
.leftCol { border:solid 1px #666666}
.rightCol {border:solid 1px #CCCCCC}
</style>
</head>
 
<body>      
<div id="content">
<div id="right-content" class="new_colWrap" style="width: 120px; height:600px; border:1px solid"> </div>
        
<div id="main-content">
<div>
    <div class="fakeWhite">
    <div class="fakeWrap">
        <div class="fakeWrapInner">
            <div id="profile-left-col" class="leftCol">
            Columna IZQUIERDA
            </div>
            <div id="profile-right-col" class="rightCol">
            Aqui va el contenido de la columna derecha
            </div>
        </div>
    </div>
    </div>
</div>
</div>
<div id="subfoot">
Esto es el footer
</div>
</div>
</body>
</html>