Tema: Dejar estatico unos cuadros (Div) mientras se encoje la ventana
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/05/2012, 18:57
Avatar de saymon
saymon
 
Fecha de Ingreso: septiembre-2003
Ubicación: Panama
Mensajes: 318
Antigüedad: 20 años, 8 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. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6.  
  7. <style>
  8.  
  9. /* Inicia Estilos Oroginales*/
  10. .fakeWhite {
  11.     height: auto;
  12.     width: 100%;
  13. }
  14. .fakeWhite .fakeWrap {
  15.     height: auto;
  16.     padding: 15px 0;
  17.     width: 100%;
  18.     min-width: 880px;
  19. }
  20. .fakeWhite .fakeWrap .fakeWrapInner {
  21.     height: auto;
  22.     padding: 0 0 0 15px;
  23. }
  24. #profile-left-col {
  25.     float: left;
  26.     height: auto;
  27.     width: 250px;
  28. }
  29. #profile-right-col {
  30.     float: left;
  31.     height: auto;
  32.     padding-bottom: 15px;
  33.     padding-left: 15px;
  34.     width: auto;
  35.     min-width:590px;
  36. }
  37. #right-content {
  38.     background: none repeat scroll 0 0 transparent;
  39.     display: block;
  40.     float: right;
  41.     text-align: center;
  42.     top: 0;
  43. }
  44. #subfoot {
  45.     width: 746px;
  46.     border:solid 1px #009900;
  47. }
  48. /* Finaliza Estilos Oroginales */
  49.  
  50. .fakeWrap { border:solid 1px}
  51. .fakeWrapInner {}
  52. .leftCol { border:solid 1px #666666}
  53. .rightCol {border:solid 1px #CCCCCC}
  54. </style>
  55. </head>
  56.  
  57. <body>      
  58. <div id="content">
  59. <div id="right-content" class="new_colWrap" style="width: 120px; height:600px; border:1px solid"> </div>
  60.         
  61. <div id="main-content">
  62. <div>
  63.     <div class="fakeWhite">
  64.     <div class="fakeWrap">
  65.         <div class="fakeWrapInner">
  66.             <div id="profile-left-col" class="leftCol">
  67.             Columna IZQUIERDA
  68.             </div>
  69.             <div id="profile-right-col" class="rightCol">
  70.             Aqui va el contenido de la columna derecha
  71.             </div>
  72.         </div>
  73.     </div>
  74.     </div>
  75. </div>
  76. </div>
  77. <div id="subfoot">
  78. Esto es el footer
  79. </div>
  80. </div>
  81. </body>
  82. </html>