ansaurus

Question

Container div doesn't surround it's floating child elements. How can I fix this?

Answer 1

+2 A:

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.

Reinis I. 2009-10-15 16:30:37

Works great, thank you.

DaClown 2009-10-15 16:40:09

Answer 2

A:

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.)

Guffa 2009-10-15 16:31:22

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 2009-10-15 16:39:32

-1: adding empty divs for the sake of clearing is poor form.

Jason 2009-10-15 16:45:49

@Jason: What alternative do you suggest? You don't consider using CSS hacks as poor form?

Guffa 2009-10-15 16:58:00

@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 2009-10-15 21:40:20

ansaurus

tags:

views:

answers:

Container div doesn't surround it's floating child elements. How can I fix this?

related questions