3

I've a XHTML structure like this:

<?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 both block elements (display:block;). The additional container div "Mitte" is mainly there for margin/padding and background image reasons. The CSS for "Navigation" and "Inhalt" looks like this:

div#Navigation {
float: left;
}

div#Inhalt {
margin: 0 0 1em 185px;
padding: 0 1em;
}

The result is that the floating navigation list sticks out of the "Mitte" div. How can I fix this?

DaClown
  • 4,171
  • 6
  • 31
  • 31

2 Answers2

7

You need a clear fix. See this page for one solution that doesn't require extra markup.

Their example 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 a .clearfix class to the #Navigation element and you'll be all set.

slikts
  • 8,020
  • 1
  • 27
  • 47
1

Floating elements doesn't affect the size of the parent. Add a clearing div 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; }

(The overflow setting is so that IE doesn't make the element larger than specified.)

Edit:

The way that I use nowadays, is to set the overflow style on the contaner. Simply add this to the style sheet:

#Mitte { overflow: hidden; }

Since there is no size specificed on the element, there isn't any content that actually will overflow, but the setting will make the element contain its children.

The advantage of this method is that it's well defined in the standards and works in all browsers. There is no extra element needed, and no hack or browser specific code needed.

Community
  • 1
  • 1
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • actually I tried that with a span element but it didn't work. Maybe I did something wrong, I'll test it again. Thanks you. – DaClown Oct 15 '09 at 16:39
  • -1: adding empty divs for the sake of clearing is poor form. – Jason Oct 15 '09 at 16:45
  • @Jason: What alternative do you suggest? You don't consider using CSS hacks as poor form? – Guffa Oct 15 '09 at 16:58
  • @guffa - no because they don't alter the markup. what happens when you redesign the site and you don't necessarily want a clear in that spot? then you have to change the markup in every place you don't want that clear, or make the "clear" class do something else. adding superfluous markup is the bloat of the internet. – Jason Oct 15 '09 at 21:40
  • I was doing something similar and the accepted answer did not work for me. So I'm up voting this because it works. If someone has an alternative that works without adding a clearing div, please share. – Lokiare Sep 17 '13 at 01:53
  • @JamesHolloway: You can use the `overflow` style on the containing element. I added code above. – Guffa Sep 17 '13 at 07:27