Geek Answers Handbook

Container / Wrapper Div does not contain all the content?

Container / Wrapper Div does not contain all content (i.e. all child Divs). I tried overflow: hidden, but still not working. Can someone please tell me why this is happening and what are the possible solutions.

Thank you in advance, -)

for some reason all code is not displayed?

<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>
+7
css css-selectors xhtml
source share
7 answers

With my crystal ball, I predict that your child divs will float and your container will not. In this case, the container will not expand to fit its contents. Try loading your container and see what happens.

The crystal must be dusty ... However, the code you posted is invalid - you have content inside the head tag and div outside the html tag. Is this what your page looks like, or is it just a mistake inserting code into your question? Try to clear the code structure and see if it helps.

EDIT: The problem found is a typo. You have <div="header"> - this should be <div id="header"> (note the missing "id")

+28
source share

Try giving clear:both parent div or put a div at the end of it:

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

Possibility:

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

Possibility:

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

Great tool: http://validator.w3.org/ - this will tell you if there are markup errors and on which lines.

+4
source share

You can add this css to the parent div:

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

And check if some of the internal elements have floats or have height restrictions, sometimes this is a problem.

+2
source share
 <h2> subheading<h2>

You miss a /

+1
source share

You have a DIV in the HEAD element.

0
source share

By default, floating elements will not be included in the div.

Try overflowing: auto in the parent div. This will force the parent div to also contain floating elements.

0
source share

More articles:


All Articles