Fritz: nested divs - border des äusseren div wird falsch angezeigt

Hallo,

in einem div mit Rahmen sitzen weitere divs.
Warum wird der Rahmen des äusseren div nicht um die inneren, gefloateten divs gezogen. Ich probier seit Tagen im Kreis rum - ausser einem rauchenden Kopf hab ich nichts.

Bitte helft mir, wo der Fehler ist.
(absolute Positionierung und width Angaben kommen nicht in Frage - das design soll liquid bleiben)

so soll es aussehen:
/-------------------------------/
/ /----------/  /----------/    /
/ /          /  /          /    /
/ /          /  /          /    /
/ /          /  /          /    /
/ /          /  /          /    /
/ /----------/  /----------/    /
/ /----------/                  /
/ /          /                  /
/ /          /                  /
/ /          /                  /
/ /          /                  /
/ /----------/                  /
/-------------------------------/

und so sieht es aus:

/-------------------------------/
/-------------------------------/
 /----------/  /----------/
 /          /  /          /
 /          /  /          /
 /          /  /          /
 /          /  /          /
 /----------/  /----------/
 /----------/
 /          /
 /          /
 /          /
 /          /
 /----------/

hier der code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css">

body {
margin:0;
padding:0;
}

#inhalt {
margin:auto;
border:2px solid red;
}

.teaser {
float:left;
width:250px;
border:1px solid black;
}

</style>

<title> </title>
</head>

<body>

<div id="inhalt">

<div class="teaser">
  <p>Lorem ipsum dolor sit amet, consectetuer
 </div>

<div class="teaser">
  <p>Lorem ipsum dolor sit amet, consectetuer
 </div>

<div class="teaser">
  <p>Lorem ipsum dolor sit amet, consectetuer
 </div>

</div>

</body>
</html>

Gruß Fritz

--
ss:| zu:) ls:[ fo:| va:) ch:? n4:& rl:? br:& js:| ie:| fl:|
  1. Hi,

    in einem div mit Rahmen sitzen weitere divs.
    Warum wird der Rahmen des äusseren div nicht um die inneren, gefloateten divs gezogen. Ich probier seit Tagen im Kreis rum - ausser einem rauchenden Kopf hab ich nichts.

    Bitte helft mir, wo der Fehler ist.

    In Deiner Vorstellung.

    floatende Elemente beeinflussen die Größe des Elternelements nicht.

    <div id="inhalt">
    <div class="teaser">
      <p>Lorem ipsum dolor sit amet, consectetuer
    </div>

    HIER muß noch ein Element mit clear:both; rein.

    </div>

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo andreas,

      floatende Elemente beeinflussen die Größe des Elternelements nicht.

      <div id="inhalt">
      <div class="teaser">
        <p>Lorem ipsum dolor sit amet, consectetuer
      </div>

      HIER muß noch ein Element mit clear:both; rein.

      </div>

      ja danke, so weit war ich schon. Nur der IE spielt dann total verrückt, und zeigt das äussere div an den lustigsten Stellen an.

      Gruß Fritz

      --
      ss:| zu:) ls:[ fo:| va:) ch:? n4:& rl:? br:& js:| ie:| fl:|
    2. Hallo Andreas,

      floatende Elemente beeinflussen die Größe des Elternelements nicht.

      Danke, das war der entscheidende Hinweis.
      Hab's jetzt so, auch für den IE gelöst:

      <div id="inhalt">

      <div></div>          (leeres div, damit der IE weiss, wo es losgeht)

      <div class="teaser">
         <p>Lorem ipsum dolor sit amet, consectetuer
      </div>

      <div style="clear:both"></div> (für alle Browser: sagt dem Elternelement, dass es bis hierher geht)

      </div>

      Gruß Fritz

      --
      ss:| zu:) ls:[ fo:| va:) ch:? n4:& rl:? br:& js:| ie:| fl:|
      1. Hallo,
        und nochmal, fürs Archiv - auch IE 5:
        <div id="inhalt">

        <div style="height:1px"> </div> <!-- IE 5.0 hack -->

        <div class="teaser">
            <p>Lorem ipsum dolor sit amet, consectetuer
        </div>

        <div style="clear:both"></div> (für alle Browser: sagt dem Elternelement, dass es bis hierher geht)

        </div>

        Gruß Fritz

        --
        ss:| zu:) ls:[ fo:| va:) ch:? n4:& rl:? br:& js:| ie:| fl:|