I don't understand why the div#footer only recognizes the space taken by div#navigation{float:right}.
Since float elements are taken out of the normal flow, div#footer should ignore both float:right and float:left elements.
I am not trying to add clear:both to div#footer. I am just curious how it happened.
body {
margin: 0;
padding: 0;
background: #ccc;
}
#container {
width: 600px;
margin: 0 auto;
}
#header {
padding: 30px;
background: #bbb;
}
#content {
float: left;
width: 460px;
background: #fff;
}
#navigation {
float: right;
width: 140px;
height: 200px;
background: #eee;
}
#footer {
background: #aaa;
padding: 10px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Floats 101</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<p>
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
</p>
</div>
<div id="navigation">
navigation
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>I dont understand why the div#footer only recognizes the space taken by div#navigation{float:right}.
Since float elements are taken out of the normal flow, div#footer should ignore both float:right and float:left elements.
When elements are floated, they are removed from the normal flow of the document. To understand it completely, that means you need to think about elements being placed in the normal flow, first, and then you can think about removing them with the float property.
Because the #navigation and #content elements are both floated, they are removed from the normal document flow. This moves the #footer element up to the top of the #container element. It's effectively positioned 'underneath' the two floated elements now.
The reason you're seeing the "footer" text still is that all un-cleared text wraps around floated elements (remember, float was designed to be used for wrapping article text around embedded images, like in a magazine article). In this case, the full width of the text's container is filled from side-to-side with floated elements, so the text is pushed to a new line.
It's hard to intuit from your example, so take a look with this one:
body {
margin: 0;
padding: 0;
background: #ccc;
}
#container {
width: 600px;
margin: 0 auto;
}
#header {
padding: 30px;
background: #bbb;
}
#content {
float: left;
width: 460px;
height: 190px;
background: #fff;
}
#navigation {
float: right;
width: 140px;
height: 220px;
background: #eee;
}
#footer {
background: #aaa;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Floats 101</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
Content
</div>
<div id="navigation">
navigation
</div>
<div id="footer">
Curabitur feugiat feugiat purus. Aenean eu metus. Nulla facilisi. Veni quis justo vel massa suscipit sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut tincidunt metus arcu vel lorem.
</div>
</div>
</body>
</html>As you can see, the text still wraps around the bottom of the #navigation element, too.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments