Menu
This is a passage from some instructional powerpoint slides on HTML and CSS:
[QUOTE]
“If all elements inside an element are set to float, then the height of the containing element becomes 0. To fix this, set overflow to auto.”
For some reason, no matter what height I specify for the children divs, the main div auto-adjusts its height to theirs when overflow is set to auto. Is this default behavior? When I set the height of the <main> div to less than that of its containing children, then I see the scrollbars because of the overflow auto setting. I understand that if I set height of <main> to anything greater than 0, its background color becomes visible again.
How does overflow work in this case? How is overflow related to the <main> background color being visible? That’s what I don’t understand. Does the overflow auto setting automatically adjusts the containing element’s height to that of its children? I don’t understand what’s going on in the internals.
[code=html]
<html>
<head>
<style>
main {
width: 500px;
margin: auto;
background: gray;
border: 2px solid blue;
overflow: auto; /* the fix */
}
nav {
border: 3px solid black;
width: 100px;
float: right;
background-color: yellow;
}
nav p {
margin: 0;
padding: 0;
}
p.content {
margin: 0;
float: left;
width: 388px;
border: 3px solid red;
}
</style>
</head>
<body>
<main>
<nav>
<p><a href=”link1″>link1</a></p>
<p><a href=”link2″>link2</a></p>
<p><a href=”link3″>link3</a></p>
<p><a href=”link4″>link4</a></p>
</nav>
<p class=”content”>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.</p>
</main>
</body>
</html>