Foros del Web » Creando para Internet » CSS »

CSS tres columnas

Estas en el tema de CSS tres columnas en el foro de CSS en Foros del Web. Re-diseño: tres columnas. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div id = "contenedor" > <!--Inicio: Id="Contenedor"-->     < div class = "gps" >< ...
  #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.
  #2 (permalink)  
Antiguo 11/02/2014, 15:34
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: CSS tres columnas

Pues si quieres que se mantenga siempre así, tendrás que especificar un ancho al contenedor, ¿no? O un ancho mínimo.

Etiquetas: css3, html
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 21:08.