Menu
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>
515
A container or wrapper is a dummy div used for purposes of setting backgrounds, floats or padding on another div. Sometimes you need an parent div to get a block level element to do what you want, whether that's simply setting a background or using margin: 0 auto to center a block.
Use a <div> Instead of a <section> By definition, the Wrapper has no semantic meaning. It simply holds all visual elements and content on the page. It's just a generic container. Therefore, in terms of semantics, <div> is the best choice. One might wonder if maybe a <section> element could fit this purpose.
“Wrapper” vs “Container” In programming languages, the word container is generally used for structures that can contain more than one element. A wrapper, on the other hand, is something that wraps around a single object to provide more functionality and interface to it.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
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')
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
