Tema: CSS tres columnas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/02/2014, 14:50
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Pregunta CSS tres columnas
Re-diseño: tres columnas.

Código HTML: 
Ver original
  1. <div id="contenedor"><!--Inicio: Id="Contenedor"-->
  2.     <div class="gps"></div>
  3.  
  4.   <div class="colleft"></div>
  5.   
  6.   <div class="colcenter"></div>
  7.  
  8.   <div class="colright"></div>
  9.  
  10.   <div class="banner"></div>
  11. </div><!--Fin: Id="Contenedor"-->

Código CSS: 
Ver original
  1. #sitio-cudl{
  2.     border: 1px solid #00664C;
  3.     height: 1195px;
  4.     margin: 20px auto;
  5.     width: 1054px;
  6.     }
  7.     #header{
  8.         background: #C1F2EE;
  9.         height: 150px;
  10.         }
  11.     h3, p{
  12.         float: left;
  13.         font-family: Arial, Tahoma, Helvetica, Sans-serif;
  14.         }
  15.     #menu{
  16.         background-color: #CFFFBF;
  17.         border-top: 1px solid #00664C;
  18.         border-bottom: 1px solid #00664C;
  19.         height: 30px;
  20.         }
  21.     #contenedor{
  22.         border-top: 1px solid #00664C;
  23.         height: 800px;
  24.         margin: 20px 0px 0px 0px;
  25.         }       
  26.         .gps{
  27.             background-color: #EEEEEE;
  28.             border-bottom: 1px solid #00664C;
  29.             height: 30px;
  30.             }
  31.         .colleft, .colright{
  32.             clear: right;
  33.             width: 247px;
  34.         }
  35.         .colleft, .colcenter, .colright{
  36.             background-color: #EEEEEE;
  37.             border-bottom: 1px solid #00664C;
  38.             float: left;            
  39.             height: 570px;
  40.             padding: 5px;
  41.             
  42.             }
  43.         .colcenter{
  44.             border-left: 1px solid #00664C;
  45.             border-right: 1px solid #00664C;
  46.             width: 528px;
  47.             }
  48.         .colright{
  49.             float: right;
  50.             }       
  51.         .banner{
  52.             background-color: #EEEEEE;
  53.             border-bottom: 1px solid #00664C;
  54.             clear: both;
  55.             height: 180px;
  56.             }

Quiero hacer tres columnas colleft y colright = 247px; y colcenter=del tamaño restante entre ambas. El tema es que, tengo un problema con el orden de los elementos flotantes. Porque cuando desminuyo o aumento la página se desbordan la ultima columna y el banner? Se que el clear es para terminar la flotacion. Algo estoy haciendo mal y no me doy cuenta de lo es. Gracias.