Verständnisproblem float und breite

[cb1982]

Hallo zusammen,

ich habe glaube ich ein generelles Verständnisproblem von float in Verbindung mit width
Um mir das selber zu veranschaulichen habe ich mich mal das minimalste beschränkt.

Die Frage ist: Warum fließt offer_right nur neben offer_left wenn es entweder keine Breite bekommt, oder eine Breite, die größer als die von offer_left ist?

<style type="text/css">


#offer_left {
   float:left;
   background-color:red;
   width:  350px;
}
#offer_right {
   background-color:lightblue;
   width: 50px;
}
</style>




<div id = offer_left>
    Links
</div>


<div id = offer_right>
    Rechts
</div>

Das wurde hier bestimmt schon unzählige Male behandelt... Finden konnte ich leider nichts

 

[Tronjer]

Wegen der Syntax-Fehler? Es muss <div id="offer_something"> heißen. Außerdem solltest du beide Divs floaten.

 

[cb1982]

Ja klar... Da fehlte etwas. Peinlich!!
Aber daran alleine liegt es nicht.

Klar, wenn ich offer_right auch float: left verpasse klappt es auch wie erwartet. Aber müsste es das nicht auch ohne das? Schließlich soll ja nur offer_left aus dem Textfluss ausgenommen werden?!

 

[Elroy]

Die Frage ist: Warum fließt offer_right nur neben offer_left wenn es entweder keine Breite bekommt, oder eine Breite, die größer als die von offer_left ist?

Für mich kompliziert zu erklären, aber ich versuchs mal.

Du hast da einen ziemlichen Denkfehler.
Deine beiden Div Elemente werden übereinander dargestellt. Das ist ganz gut zu sehen wenn du das gefloatete Element mit margin mal 10px nach links schiebst.

Da deine zweite Div Box aber Text enthält und dieser nicht neben dem float angezeigt werden kann rutsch er eben nach unten.

Erweiterst du die Größe der div Box dann sieht es so aus als sei die div Box neben den float gerutsch in Wirklichkeit ist es aber nur der Text.

Möchtest du deine Div Box neben dem float haben dann ändere dein offer.right so ab:

#offer_right { background-color:lightblue;
                  width: 50px;
                  margin-left: 360px;}

Falls das etwas verwirrend war oder du es nicht verstanden hast wird es hier noch einmal genau erklärt: Float: Die Theorie