Las dichosas 3 columnas

[valencia1984]

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 :)

[Mikmoro]

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.

[valencia1984]

Iniciado por Mikmoro

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

[Mikmoro]

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.

[valencia1984]

Iniciado por Mikmoro

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!