Zeromancer: Float und Brett vorm Kopf

Hallo,

ich kann leider zur Zeit keine Seite online stellen, deshalb hier mein Code.

Das Div mit der id="content" umfließt leider nicht das Div mit der id="subnavi".

Woran könnte dies liegen?

Die Validatoren für CSS und HTML auf w3c.org geben keine Fehlermeldungen aus.

HTML
----

<!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="en" lang="en">

<head>
<title>Test</title>
<link rel="Stylesheet" type="text/css" href="screen.css" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id="head">&nbsp;</div>

<div id="navi">&nbsp;</div>

<div id="subnavi">&nbsp;</div>

<div id="content">&nbsp;</div>

<div id="foot">&nbsp;</div>

</body>
</html>

CSS
------

html {
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
}
body {
  font-size:101%;
  font-family:sans-serif;
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
}
div#head {
  width:100%;
  height:80px;
  background:#ff0000;
}
div#navi {
  width:100%;
  height:30px;
  background:#00ff00;
}
div#subnavi {
  width:150px;
  height:200px;
  float:left;
  border:solid 2px #ff0000;
  background:transparent;
}
div#content {
  border:dotted 2px #000;
  background:#ff8800;
}
div#foot {
  clear:both;
  width:100%;
  height:40px;
  background:#88ff00;
}

Mit freundlichen Grüßen

André

  1. Hallo!

    Das Div mit der id="content" umfließt leider nicht das Div mit der id="subnavi".

    Woran könnte dies liegen?

    Ein Div ist ein Rechteck, ein Rechteck kann ein anders nicht umfließen?!
    Text kann ein Rechteck umfließen.

    Beste Grüße
    Viennamade

    1. Hallo,

      Ein Div ist ein Rechteck, ein Rechteck kann ein anders nicht umfließen?!
      Text kann ein Rechteck umfließen.

      Gut. Aber hilf mir mal bitte noch mal weiter. Wie ist es mit Listenpunkten ( <li> ), die ich mit float:left horizontal nebeneinander ausrichten kann? Ein weiteres Beispiel wären Verweise für eine horizontale Navigation mit display:block sowie Höhe und Breite, die ich doch auch floaten kann.

      Mit freundlichen Grüßen

      André

      1. Schau dir diese Seite an, mach das Tut und du weisst Bescheid, wegen Listen und so. Empfehle dir auch das neuste Select Tutorial. Da ist so das wichtigste drin, von wegen Float, Listen und so.

        Gruss
        pierre

        1. Hallo pierre,

          Schau dir diese Seite an, mach das Tut und du weisst Bescheid, wegen Listen und so. Empfehle dir auch das neuste Select Tutorial. Da ist so das wichtigste drin, von wegen Float, Listen und so.

          Bist ja ein ganz lustiger Typ. Finde aber hier im Forum keine Tutorials. Kleiner Tipp von meiner Seite: Ein Blick in die Vorschau dieses Forums hilft solche Fehler zu vermeiden.

          Mit freundlichen Grüßen

          André

  2. Hi,

    Das Div mit der id="content" umfließt leider nicht das Div mit der id="subnavi".
    Woran könnte dies liegen?

    height:auto berechnet sich ohne enthaltene gefloatete Elemente, es sei denn das Element selbst ist ebenfalls gefloatet.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo Cheatah,

      height:auto berechnet sich ohne enthaltene gefloatete Elemente, es sei denn das Element selbst ist ebenfalls gefloatet.

      Du wolltest also sagen, ich soll eine Höhe für id="content" angeben, wobei ich auch eine relative Größe benutzen könnte?

      Mit freundlichen Grüßen

      André

      1. Hi,

        height:auto berechnet sich ohne enthaltene gefloatete Elemente, es sei denn das Element selbst ist ebenfalls gefloatet.
        Du wolltest also sagen, ich soll eine Höhe für id="content" angeben, wobei ich auch eine relative Größe benutzen könnte?

        nein ;-) weil das nur selten so genau geht.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  3. Tach»»

    Woran könnte dies liegen?

    Der Inhalt wird "gefloatet", nicht die Box an sich. Du wirst das erkennen, wenn Du den content-div mal mit etwas text füllst.

    div#content {
      border:dotted 2px #000;
      background:#ff8800;

    margin-left:150px
    }

    Damit kannst Du dann auch komplett auf float verzichten.

    Thomas J.

    1. Hallo Thomas J.,

      Der Inhalt wird "gefloatet", nicht die Box an sich. Du wirst das erkennen, wenn Du den content-div mal mit etwas text füllst.

      div#content {
        border:dotted 2px #000;
        background:#ff8800;
           margin-left:150px
      }

      Damit kannst Du dann auch komplett auf float verzichten.

      Vielen Dank.

      Mit freundlichen Grüßen

      André