The container div does not surround its floating children. How can I fix this?
I have an XHTML structure:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="Seite" class="bgr">
<div id="Titel" class="bgr">
<h1>some titel</h1>
</div>
<div id="Mitte" class="bgr">
<div id="Navigation" class="bgr">
<ul>
<li><a href="link.html" class="aktiv"><img src="text.gif" alt="[Link]" /></a></li>
</ul>
</div>
<div id="Inhalt" class="uebersicht bgr">
Content
</div>
</div>
<div id="Fusszeile" class="bgr">
</div>
</div>
</body>
</html>
"Titel" and "Fusszeile" are block elements ( display:block;
). The extra container-container "Mitte" is mainly used for markup / padding and background image. The CSS for Navigation and Inhalt looks like this:
div#Navigation {
float: left;
}
div#Inhalt {
margin: 0 0 1em 185px;
padding: 0 1em;
}
As a result, the floating navigation list falls out of the "Mitte" div. How can I fix this?
source to share
You need a clear fix. See this page for a single solution that doesn't require additional markup.
Sample code:
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->
Just copy the CSS to your project and add the class .clearfix
to the element #Navigation
and everything will be installed.
source to share
Floating elements do not affect the size of the parent. Add a dividing box at the bottom of Mitte:
<div id="Mitte" class="bgr">
<div id="Navigation" class="bgr">
<ul>
<li><a href="link.html" class="aktiv"><img src="text.gif" alt="[Link]" /></a></li>
</ul>
</div>
<div id="Inhalt" class="uebersicht bgr">
Content
</div>
<div class="Clear"></div>
</div>
CSS
.Clear { clear: both; height: 0; overflow: hidden; }
(overflow option so that IE doesn't make the element larger than the specified one.)
Edit:
Now I am using the style overflow
on the contanera. Just add this to your stylesheet:
#Mitte { overflow: hidden; }
Since there is no specific size in the element, there is no content to actually overflow, but this setting will force the element to contain its children.
The advantage of this method is that it is well defined in the standards and works in all browsers. There is no need for an additional element, and no special browser or browser code is required.
source to share