Foros del Web » Creando para Internet » CSS »

Las dichosas 3 columnas

Estas en el tema de Las dichosas 3 columnas en el foro de CSS en Foros del Web. Hola gente! Llevo varios días con esto y no hay forma... Las 3 columnas ¡¡se me resisten con CSS!!! A ver si alguien me puede ...
  #1 (permalink)  
Antiguo 10/07/2008, 16:27
 
Fecha de Ingreso: febrero-2006
Mensajes: 20
Antigüedad: 11 años, 9 meses
Puntos: 0
Las dichosas 3 columnas

Hola gente!

Llevo varios días con esto y no hay forma... Las 3 columnas ¡¡se me resisten con CSS!!!

A ver si alguien me puede echar una mano, el pké me pasa que la esquina superior izquierda de la col3, está pegada a la esquina inferior derecha de la col2.

Debería de aparecer gráficamente así:

-->Encabezado--<
--->Secciones---<
->Col1->Col2->col3
----->Final-----<

Pero no es así :(



#wrap {
margin:0 auto 0 auto;
width:960px;
text-align:left;
}



#contenedor {
margin-top: 20px;
width: 960px;
border: 0px solid #000000;
background-color: #D3D7D9;


}

#encabezado {
width: 960;
height: 120px;
border: 0px;
}

#contenedorencabezado {
width: 960;
border: 0px;
}

#logo {
width: 300;
height: 120;
border: 0px;
background-image: url(../images/disenos/base/logo.gif);
}

#secciones {
width: 960px;
height: 35px;
}

#seccionesCentrar {
margin:0 auto 0 auto;
width:960px;
text-align:center;

}


#cuerpo {
margin: 0 0 0 0px;
width: 960px;
background-color: #7E919A;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

#col1 {
float: left;
width: 280px;
background-color: #7E119A;
}

#col2 {
margin-left: 285px;
width: 390px;
background-color: #171716;
}

#col3 {
float: right;
width: 280px;
background-color: #7EB19A;
}

#finalCols {
background-color: #cccccc;
padding: 0 0 0 0px;
text-align:right;
clear: both;
}

#final {
width: 960px;
height: 35px;
}


Y el html es este:

<div id="wrap">
<div id="contenedor">
<div id="encabezado">
<div id="contenedorencabezado">
<div id="logo">
</div>

</div>
</div>
<div id="secciones">
<div id="seccionesCentrar">
<ul id="listasecciones">
<li class="ls">
<a href="#">Algo </a>
</li>
<li class="ls">
<a href="#">Algo2 </a>
</li>
<li class="ls">
<a href="#">Algo3 </a>
</li>
<li class="ls">
<a href="#">Algo4</a>
</li>
<li class="ls">
<a href="#">Algo5</a>
</li>
</ul>
</div>
</div>
<div id="cuerpo">
<div id="col1">
col1col1col1col1col1co
</div>
<div id="col2">
col2col2col2col2col2co l
</div>
<div id="col3">
col3col3col3col3col3 col3col3col3col3col3c
</div>
<div id="finalCols">
</div>
</div>
<div id="final">
</div>
</div>
</div>

¿¿¿¿Alguna ayudita???



Muchas Gracias :)
  #2 (permalink)  
Antiguo 10/07/2008, 16:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Las dichosas 3 columnas

Pruébalo así a ver si te sirve:

#col1 {
float: left;
width: 280px;
background-color: #7E119A;
}
#col2 {
float: left;
width: 390px;
background-color: #171716;
}
#col3 {
background-color: #7EB19A;
}

Mikel.
  #3 (permalink)  
Antiguo 10/07/2008, 16:57
 
Fecha de Ingreso: febrero-2006
Mensajes: 20
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Las dichosas 3 columnas

Cita:
Iniciado por Mikmoro Ver Mensaje
Pruébalo así a ver si te sirve:

#col1 {
float: left;
width: 280px;
background-color: #7E119A;
}
#col2 {
float: left;
width: 390px;
background-color: #171716;
}
#col3 {
background-color: #7EB19A;
}

Mikel.

Hola!

No sabía que se pudiera poner el float left repetidas veces :P

Bueno, lo he probado, y la columa 3 ocupaba todo el cuerpo, y la col1 y col2, estaban por encima.

Al final lo he dejado así:

#col1 {
float: left;
width: 280px;
background-color: #7E119A;
}

#col2 {
float: left;
width: 390px;
background-color: #171716;
}

#col3 {
float: left;
width: 280px;
background-color: #7EB19A;
}

Y aparentemente funciona... Aunque no se si el tener 3 "floats : left" me va a dar problemas más tarde. ¿Que opináis?

Muchiiisimas gracias Mikmoro :D
  #4 (permalink)  
Antiguo 10/07/2008, 17:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Las dichosas 3 columnas

Si puedes pruébalo en IE6; este sí que te podría dar problemas.

Si los tienes, podrías ponerlo así:

#col3 {
margin-left: 670px;
background-color: #7EB19A;
}

Esto evita problemas porque la columna 3 ocupa todo el espacio disponible sobrante.

Mikel.
  #5 (permalink)  
Antiguo 11/07/2008, 18:50
 
Fecha de Ingreso: febrero-2006
Mensajes: 20
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Las dichosas 3 columnas

Cita:
Iniciado por Mikmoro Ver Mensaje
Si puedes pruébalo en IE6; este sí que te podría dar problemas.

Si los tienes, podrías ponerlo así:

#col3 {
margin-left: 670px;
background-color: #7EB19A;
}

Esto evita problemas porque la columna 3 ocupa todo el espacio disponible sobrante.

Mikel.
Con gente como tu, da gusto :):) Por ahora no me da problemas, lo que pasa es que no tengo el ie6... A ver si pillo algún ordenador que lo tenga, lo pruebo y posteo los resultados.

Muchas Gracias!

PD: Ya lo he probado, y funciona muy bién en el ie 6 :)) Zenkius!

Última edición por valencia1984; 18/07/2008 a las 08:52
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 19:18.