2010-05-17 13 views
7

Container/Wrapper Div no contiene todo el contenido (es decir, todas las Div secundarias). He intentado el desbordamiento: oculto, pero todavía no funciona. ¿Puede alguien decirme por qué sucede esto y cuáles son las soluciones posibles?Container/Wrapper Div no contiene todo el contenido?

gracias de antemano ;-)

por alguna razón todo el código no muestra ??

<html> 
    <head> 
     <style type="text/css"> 
     #wrapper { 
      margin:0 auto; 
      width: 600px; 
      background: yellow;  
     } 
     </style> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <div="header"> 
       <h1>my beautiful site</h1> 
      </div> 

      <div id="navigation"> 
       <ul> 
        <li><a href="#">Home </li> 
        <li><a href="#">About</li> 
        <li><a href="#">Services</li> 
        <li><a href="#">Contact us </li> 
       </ul> 
      </div> 

      <div id="content"> 
       <h2> subheading </h2> 
       <p> long paragraph </p> 
      </div> 

      <div id="footer"> 
        copyright 123 
      </div> 
     </div> 
    </body> 
</html> 
+1

Ayudaría si publica el código ... – Rob

Respuesta

25

Con mi bola de cristal, voy a predecir que sus divisiones secundarias están flotando y su contenedor no. En este caso, el contenedor no se expandirá para adaptarse a su contenido. Intenta flotar tu contenedor y ver qué pasa.

El cristal debe haber estado polvoriento ... Sin embargo, el código que publicó no es válido: tiene contenido dentro de la etiqueta de encabezado y un div fuera de la etiqueta html. ¿Es así como realmente se ve tu página o es solo un error al pegar el código en tu pregunta? Intente limpiar la estructura del código y vea si ayuda.

EDIT: encontré el problema, es un error tipográfico. Tiene <div="header"> - debe ser <div id="header"> (nótese el 'id' falta)

+0

¡No pude publicar todo el código allí por alguna razón! sí algunos errores tipográficos :-( – Imran

+0

por favor intente de nuevo - con el pequeño fragmento de código que le queda, nadie podrá ayudar – Ray

+0

Edité mi respuesta para mostrar el error tipográfico en su código que está causando el problema. – Ray

3

Trate de darle la clear:both al padre div o poner un div al final de la misma:

<style type="text/css"> 
.clear{clear:both;} 
</style> 

Posibilidad uno:

<div id="parent"> 
    <div id="child1">Some Content</div> 
    <div id="child2">Some Content</div> 
    <div id="child3">Some Content</div> 

    <div class="clear"></div> 
</div> 

Posibilidad dos:

<div id="parent" class="clear"> 
    <div id="child1">Some Content</div> 
    <div id="child2">Some Content</div> 
    <div id="child3">Some Content</div> 
</div> 
+0

La segunda posibilidad no es la misma que la primera. Si coloca el '

' delante del div '' parent' entonces sí, ambos tienen el mismo efecto. – ANeves

+1

Posibilidad Uno funcionó bastante bien para un proyecto en el que estaba trabajando. –

0

Tiene un DIV en su elemento HEAD.

1
<h2> subheading<h2> 

se olvida de un/

0

Puede agregar este CSS para el div padre:

.parent-div{overflow:auto;clear:both;}

Y comprobar si algunos de los elementos internos tienen flotadores o tienen algunas restricciones de altura, a veces es un problema.

Cuestiones relacionadas