Container/Wrapper Div does not contain all content (ie all the child Div’s).I’ve tried overflow: hidden but still doesn’t work. Can someone please tell me why this is happening and what are the possible solutions.
Thank you in advance 😉
for some reason the whole code does not display??
<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>
With my crystal ball, I will predict that your child divs are floated and your container is not. In this case, the container will not expand to fit its contents. Try floating your container and see what happens.
The crystal must have been dusty… However, the code you posted is not valid – you have content inside the head tag and a div outside the html tag. Is this how your page really looks, or is it just an error pasting the code into your question? Try cleaning up the code structure and see if it helps.
EDIT: Found the problem – it is a typo. You have
<div="header">– it should be<div id="header">(note the missing ‘id’)