Problema con maquetación css

[marioraja]

Hola, tengo un problema a la hora de maquetar mi página web. Resulta que tengo una capa identificada como "cuerpo" con float a la izquierda; y otra identificada como "lateral" con float a la derecha. Estas dos están metidas dentro de otra capa usada como contenedor, ésta otra la tengo identificada como "contenedor".

- código html:

Código:

<div id="contenedor">
  <div id="cuerpo">Pasarela 1<br /> Pasarela 2<br />Pasarela 3</div>
  <div id="lateral">Mis pasarelas</div>
</div>

- código css:

Código:

    #contenedor  {
       width:750px;
       background-color:#FFFFFF;
       margin:auto;
       text-align:left;
     }

     #cuerpo {
       float:left;
       width:546px;
       padding-right:12px;
       padding-left:12px;
     }

     #lateral{
       float:right;
       width:180px;
     }

El problema es que las capas "cuerpo" y "lateral" no se quedan dentro de la capa contenedor; sinó que se salen y pisan el contenido que tengo por debajo. Lo curioso es que a la capa que le quito la propiedad "float", automáticamente se introduce en la capa "contenedor".

¿Alguién me puede ayudar a poder tener las capas "cuerpo" y "lateral" con "float" y dentro de la capa "contenedor"?

[toforo]

Prueba esto

Código HTML:

<div id="contenedor">
  <div id="cuerpo">
    <p>Pasarela 1<br> 
      Pasarela 2<br>
      Pasarela 3</p>
    <div id="lateral">Mis pasarelas</div>
  </div> 

Código HTML:

#contenedor  {
       width:750px;
       background-color:#FFFFFF;
       margin:auto;
       text-align:left;
     }

     #cuerpo {
       float:left;
       width:546px;
       padding-right:12px;
       padding-left:12px;
     }

     #lateral{
       float:right;
       width:180px;
     }

[marioraja]

Sigue igual; se sale del contenedor. Lo curioso es que con el internet explorer funciona perfectamente. Es con el firefox con el que da los problemas.

La verdad que no lo entiendo; en otra web que setoy haciendo, con una estructura similar, no da ese problema; de hecho, al añadir contenido el div "cuerpo" se expande para adaptarse al contenido; y arrastra a su vez a "contenedor".

[BayronB]

Hola, probablemente esta no sea la mejor solución, pero podrias hacer uso de la propiedad clear:both en un div adicional.

Codigo HTML:

Código HTML:

<div id="contenedor">
  <div id="cuerpo">Pasarela 1<br /> Pasarela 2<br />Pasarela 3</div>
  <div id="lateral">Mis pasarelas</div>
  <div id="clear"></div>
</div> 

Codigo CSS solo añadir:

Código:

     #clear {
       clear: both;
       height: 1px; /*util para netscape*/
     }

[baccxus]

Por lo general, se usa solo una capa en flotante (la que menos espacio va a usar) y la otra solo se posiciona dejando un margen equivalente al ancho de la que flota (a veces me enreddo yo mismo cuando me explico):

Código:

#contenedor  {
       width:750px;
       background-color:#FFFFFF;
       margin:0 auto;
     }

     #cuerpo {
       width:546px;
       padding: 0 12px;
       margin-right: 180px;
     }

     #lateral{
       float:right;
       width:180px;
     }

Y el html

Código HTML:

<div id="contenedor">
<div id="lateral">Mis pasarelas</div><!-- Final de lateral-->
<div id="cuerpo"><p>Pasarela 1<br> Pasarela 2<br>  Pasarela 3</p>
</div><!--Final de cuerpo -->
</div><!-- Final de contenedor--> 

Saludos

PD: Un div vacío no es la solución

[marioraja]

Esa era la solución: la de baccxus; de todas formas, gracias a los demás también. Ahora ya las dos capas se quedan dentro del contenedor y éste se expande con el contenido.

No obstante, y no se porqué, en otra web que estoy haciendo, tengo dos capas con float a la izquierda y a la derecha respectivamente dentro de un contenedor y si se expande con normalidad. Mirando el código css de las capas no encuentro diferencia alguna al código de la web que daba problemas.

Código:

 #contenedor { 
   text-align:left; 
   width:680px;  
   margin:auto;
   background-color:#FFFFFF;
   background-image:url("imagenes/textura.png");
 }

 #lateral {
   float:left;
   width:120px;
   background:#FFFFFF;
 }

 #cuerpo {
   float:right;
   width:544px;
   padding-right:8px;
   padding-left:8px;
 }

¿Es muy extraño verdad?

[baccxus]

Debes ver que tipo de DTD valida el documento, puede ser eso lo que pasa con tus capas flotantes.


Saludos

[jesusbet]

por cierto, a ver si inventamos nuevos títulos para los temas, porque con este tipo de títulos solo ahuyentas a los foreros...