divs colapsando alrededor de cabecera

que tienen algunos divs anidados: estilodivs colapsando alrededor de cabecera

<div id="wrapper"> 
    <div id="header"> 
    <!-- a bunch of float divs here --> 
    </div> 

    <div id="body"> 
    <div id="content"> 
     <!-- a bunch of html controls here --> 
    </div> 
    </div> 
</div>

envoltorio: width: 780px; margin: 20px auto; border: solid black 5px;
estilo de cabecera: position: relative; min-height: 125px;
Física: position: relative;
estilo de contenido: position: absolute; left: 50px; top: 0px;

Tengo un montón de elementos html en el div de contenido y, por alguna razón, el div corporal y el divisor de envoltura se colapsan alrededor del encabezado y el div del contenido cuelga solo si no configuro una altura fija para el cuerpo div . Los únicos elementos flotantes que tengo están en el encabezado.

EDITAR:

Si quito el div contenido (y soltar los elementos de HTML directamente en el cuerpo) el div cuerpo deja colapsar! Tratando de entender por qué, supongo que se debe a la posición: absoluta del contenido div.

¿Alguna pista de por qué sucede esto y cómo resolverlo?

Eché un vistazo a this question pero no parece funcionar para mí (o tal vez estoy despejando en el lugar equivocado ...).

Fuente

2009-03-02 JohnIdol

Debe suministrar un barebones css que esté utilizando. – cletus

tienes razón, ¡listo! :-) – JohnIdol

Usted realmente no necesita utilizar el posicionamiento absoluto o relativo en este caso.

A continuación se logra lo que necesita con una cantidad mínima de disputas css.
Colores porque me gusta el color, ¡y tú también!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <title>Page Title</title> 
     <style type="text/css" media="screen"> 
    #wrapper { 
     width: 780px; 
     margin: 20px auto; 
     border: solid black 5px; 

    } 
    #header { 
     min-height: 125px; 
     overflow:hidden; 

    } 
    #body { 
     background-color:red; 

    } 
    #content { 
     margin-left: 50px; 
     margin-top: 0px; 
     background-color:pink; 

    } 
.floatie { float:left; width:40px; height :40px; 
    margin:5px; background-color:#fe0;} 

     </style> 


    </head> 
    <body> 



     <div id="wrapper"> 
      <div id="header"> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
      </div> 

      <div id="body"> 
      <div id="content"> 

       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore 
        magna aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip ex ea 
        commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteur sint occaecat 
        cupidatat non proident, sunt in culpa qui officia 
        deserunt mollit anim id est laborum.</p> 
      </div> 
      </div> 
     </div> 

    </body> 
</html>

Fuente

2009-03-02 10:15:14 garrow

Su etiqueta FORM huérfano está mostrando – random

etiqueta de forma extraña fijo! gracias por eso ... (reutilizando el código de muestra FTW!) – garrow

Agregué este código a: http://jsfiddle.net/BkSmJ/ – Cymbals

Intente borrar sus elementos flotados dentro de el encabezado.

<div id="wrapper"> 
    <div id="header"> 
    <!-- a bunch of float divs here --> 
    <div style="clear:both;"></div> <!-- Or use a clearfix... --> 
    </div> 

    <div id="body"> 
    <div id="content"> 
     <!-- a bunch of html controls here --> 
    </div> 
    </div> 
</div>

Mientras el elemento de limpieza esté dentro del div que contiene, debe lograr lo que desea.

Fuente

2009-03-02 00:24:31

Agregue el estilo "clear: both" a su div con id de "cuerpo". También puede agregar un div con este estilo justo después del "grupo de divs float" y antes de cerrar la etiqueta del encabezado div.

Fuente

2009-03-02 00:24:52 Stiropor

Adición claro: tanto a la div cuerpo sólo posicionará el div cuerpo en el lugar correcto, pero la cabecera div todavía se derrumbó debido a que sus contenidos no están en flujo normal. –

Cuando quiere borrar algo, también necesita flotar ese elemento para que funcione correctamente. Entonces lo necesitarás.

#header { clear: both; float: left; } 
#body { clear: both; float: left; }

Fuente

2009-03-02 00:33:03 Alex

que utilizan este estilo para los elementos de compensación:

.Clear { clear: both; height: 0; overflow: hidden; }

Coloque un div de compensación en la cabecera, para dar el tamaño del elemento de cabecera:

<div id="wrapper"> 
    <div id="header"> 
    <!-- a bunch of float divs here --> 
    <div class="Clear"></div> 
    </div> 

    <div id="body"> 
    <div id="content"> 
     <!-- a bunch of html controls here --> 
    </div> 
    </div> 
</div>

Ajuste de la altura de la limpieza elemento a cero hace que no ocupe ningún espacio por sí mismo. El estilo de desbordamiento es para que IE no le dé una altura aunque la altura se establezca en cero. IE tiene una extraña idea de que cada elemento tiene que tener al menos un carácter alto, configurando el desbordamiento: oculto; mantiene la altura en cero aunque el contenido del elemento tiene un carácter alto en IE.

Fuente

2009-03-02 00:34:04 Guffa

No me gusta usar "clear: both" si no es totalmente necesario. Una mejor solución es establecer la propiedad de "desbordamiento" del DIV colapsante en "automático".

intentar algo como:

#header { float: left; overflow: auto; }

Fuente

2009-03-02 00:35:24 Allan

Esto no funciona en IE6 – Alex

Prueba esto. Nota: el desbordamiento oculto en el div del encabezado resuelve la necesidad de un div de compensación. Sin embargo, tenga en cuenta por qué está usando el posicionamiento relativo + absoluto para el contenido. Eso se maneja mejor con márgenes imho.

<html> 
<head> 
    <title>Layout</title> 
    <style type="text/css"> 
    #wrapper { width: 780px; margin: 20px auto; border: solid black 5px; } 
    #header { overflow: hidden; background-color: yellow; } 
    #header div { float: right; border: 2px solid red; } 
    #body { position: relative; } 
    #content { position: absolute; left: 50px; top: 0px; } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header"> 
     <div>One</div> 
     <div>Two</div> 
     <div>Three</div> 
     </div> 
     <div id="body"> 
     <div id="content"> 
      <p>This is some text</p> 
     </div> 
     </div> 
    </div> 
</body> 
</html>

Fuente

2009-03-02 00:42:58 cletus

Si quieren #content a aparecer dentro de los límites fronterizos de #wrapper probar este intercambio en el tamaño, después de quitar position:relative de #body (o eliminar por completo que DIV):

#header{position: relative; overflow:hidden; clear:both;} 
#content{position:relative; left:50px; top:0px;}

De esta forma, podrás ver #content aparecer dentro del contenedor pero debajo de #header.

que puede estar ocurriendo porque en realidad no hay nada por #content a pegarse hacia fuera de debajo. #header, cuando se configuró como relativa, desaparece para el siguiente, incluso si #body se estableció en absolute con los descendientes configurados en relative.

Al cambiar #contenido de position:absolute a position:relative tendrá que venir bajo el DIV anterior, que en este caso era # encabezado.

Fuente

2009-03-02 01:16:18 random

Gracias - position: relative en #content tipo de obras (! Sin quitar el div #body, lo necesito) – JohnIdol

divs colapsando alrededor de cabecera

Respuesta

Cuestiones relacionadas