Foros del Web » Creando para Internet » CSS »

Problema con maquetación css

Estas en el tema de Problema con maquetación css en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 14/04/2007, 12:53
Avatar de marioraja  
Fecha de Ingreso: abril-2007
Mensajes: 66
Antigüedad: 10 años, 8 meses
Puntos: 0
Problema con maquetación css

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"?
  #2 (permalink)  
Antiguo 14/04/2007, 14:43
 
Fecha de Ingreso: octubre-2006
Mensajes: 173
Antigüedad: 11 años, 2 meses
Puntos: 3
Re: Problema con maquetación css

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;
     }
__________________
¨
  #3 (permalink)  
Antiguo 14/04/2007, 18:39
Avatar de marioraja  
Fecha de Ingreso: abril-2007
Mensajes: 66
Antigüedad: 10 años, 8 meses
Puntos: 0
Re: Problema con maquetación css

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".
  #4 (permalink)  
Antiguo 14/04/2007, 19:26
 
Fecha de Ingreso: abril-2007
Mensajes: 1
Antigüedad: 10 años, 8 meses
Puntos: 0
Re: Problema con maquetación css

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*/
     }
  #5 (permalink)  
Antiguo 14/04/2007, 19:28
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Re: Problema con maquetación css

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
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 14/04/2007 a las 19:40
  #6 (permalink)  
Antiguo 15/04/2007, 05:11
Avatar de marioraja  
Fecha de Ingreso: abril-2007
Mensajes: 66
Antigüedad: 10 años, 8 meses
Puntos: 0
Re: Problema con maquetación css

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?
  #7 (permalink)  
Antiguo 16/04/2007, 19:57
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Re: Problema con maquetación css

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


Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #8 (permalink)  
Antiguo 16/04/2007, 20:47
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
Re: Problema con maquetación css

por cierto, a ver si inventamos nuevos títulos para los temas, porque con este tipo de títulos solo ahuyentas a los foreros...
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 08:03.