Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Dejar estatico unos cuadros (Div) mientras se encoje la ventana en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/05/2012, 19:57
Avatar de saymon  
Fecha de Ingreso: septiembre-2003
Ubicación: Panama
Mensajes: 318
Antigüedad: 16 años, 3 meses
Puntos: 0
Dejar estatico unos cuadros (Div) mientras se encoje la ventana

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5.  
  6.  
  7. /* Inicia Estilos Oroginales*/
  8. .fakeWhite {
  9.     height: auto;
  10.     width: 100%;
  11. }
  12. .fakeWhite .fakeWrap {
  13.     height: auto;
  14.     padding: 15px 0;
  15.     width: 100%;
  16.     min-width: 880px;
  17. }
  18. .fakeWhite .fakeWrap .fakeWrapInner {
  19.     height: auto;
  20.     padding: 0 0 0 15px;
  21. }
  22. #profile-left-col {
  23.     float: left;
  24.     height: auto;
  25.     width: 250px;
  26. }
  27. #profile-right-col {
  28.     float: left;
  29.     height: auto;
  30.     padding-bottom: 15px;
  31.     padding-left: 15px;
  32.     width: auto;
  33.     min-width:590px;
  34. }
  35. #right-content {
  36.     background: none repeat scroll 0 0 transparent;
  37.     display: block;
  38.     float: right;
  39.     text-align: center;
  40.     top: 0;
  41. }
  42. #subfoot {
  43.     width: 746px;
  44.     border:solid 1px #009900;
  45. }
  46. /* Finaliza Estilos Oroginales */
  47.  
  48. .fakeWrap { border:solid 1px}
  49. .fakeWrapInner {}
  50. .leftCol { border:solid 1px #666666}
  51. .rightCol {border:solid 1px #CCCCCC}
  52. </head>
  53.  
  54. <body>      
  55. <div id="content">
  56. <div id="right-content" class="new_colWrap" style="width: 120px; height:600px; border:1px solid"> </div>
  57.        
  58. <div id="main-content">
  59. <div>
  60.     <div class="fakeWhite">
  61.     <div class="fakeWrap">
  62.         <div class="fakeWrapInner">
  63.             <div id="profile-left-col" class="leftCol">
  64.             Columna IZQUIERDA
  65.             </div>
  66.             <div id="profile-right-col" class="rightCol">
  67.             Aqui va el contenido de la columna derecha
  68.             </div>
  69.         </div>
  70.     </div>
  71.     </div>
  72. </div>
  73. </div>
  74. <div id="subfoot">
  75. Esto es el footer
  76. </div>
  77. </div>
  78. </body>
  79. </html>

Etiquetas: contenido, cuadros, dejar, estatico, html, mientras, ventanas, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:53.