Armin: DIV Blöcke nebeneinander

Hallo,
haben folgenden HTML/CSS code

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<title>Test</title>  
  
</head>  
<body>  
<div style="float:left;border-style:solid;height:100px">  
xx  
</div>  
<div style="float:left;margin-left:4em;border-style:solid;height:100px;">  
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  
</div>  
  
</body>  
</html>  

Die rechte Box wird nach unten verschoben. Sobald ich height: 100px aus beiden Boxen entferne oder die zweite Box nicht mehr floate werden die Boxen nebeneinander angezeigt.

kann mir jemand dieses Verhalten des Browsers erklären?

Danke und Grüße

Armin

  1. Hi,

    Die rechte Box wird nach unten verschoben. Sobald ich height: 100px aus beiden Boxen entferne oder die zweite Box nicht mehr floate werden die Boxen nebeneinander angezeigt.

    Ersteres kann ich nicht nachvollziehen.

    kann mir jemand dieses Verhalten des Browsers erklären?

    Fällt dir beim entfernen von float was auf ...?
    Richtig, der Rahmen umschließt nicht mehr den kompletten (überbreiten) Inhalt, sondern die Box ist offenbar nur noch so breit, wie bis zum Viewportrand platz ist.

    M.E. trifft folgender Punkt aus den Regeln für Floating hier zu:
    “7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.)”

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Hallo,

      Fällt dir beim entfernen von float was auf ...?
      Richtig, der Rahmen umschließt nicht mehr den kompletten (überbreiten) Inhalt, sondern die Box ist offenbar nur noch so breit, wie bis zum Viewportrand platz ist.

      M.E. trifft folgender Punkt aus den Regeln für Floating hier zu:
      “7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.)”

      Also ich hasse floats bis heute, auch wenn ich dennoch keine Tabellen stattdessen benutze. Aber es ist schon irre, dass sich so viele Menschen mit dieser Logik rumplagen müssen, nur um ihre Inhalte einfach nebeneinander auf die Webseite zu packen. Helfen tut aber:

      containing floats (von Complex spiral consulting) sowie
      Floats dont suck if you use them right (vom CSS-Guru Eric Meyer persönlich).

      Fazit: Für mich sucken sie immer noch, weil ich sie nicht right use. Vielleicht sollte ich mal float:right statt float:left probieren (;-)

      Gruß

      jobo

      1. @@jobo:

        nuqneH

        Fazit: Für mich sucken sie immer noch, weil ich sie nicht right use. Vielleicht sollte ich mal float:right statt float:left probieren (;-)

        Vielleicht auch display: inline-block.

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. Hallo,

          Fazit: Für mich sucken sie immer noch, weil ich sie nicht right use. Vielleicht sollte ich mal float:right statt float:left probieren (;-)

          Vielleicht auch display: inline-block.

          Schön, dass man nie auslernt. display:inline-block hatte mir vor Jahre schon gefehlt und ich hatte mir halt gemerkt, dass "das " nicht geht. (de.selhfmlt.org hat dazu auch eine Seite, die ist aber aktuell nicht aufrufbar).

          Qapla'

          Gruß

          jobo