✔ Problem nebeneinanderliegenden DIVs

[frankmeisner]

Hallo,
ich habe eine grundsätzliche Frage an Euch. Das ich zwei DIVs mit dem Float Tag nebeneinander platzieren kann ist mir bewusst. Folgendes Problem habe ich nun:

Folgender Code lässt die beiden DIVs wunderbar nebeneinander floaten:

<div style="background-color:blue; float:left">Box1</div>
<div style="background-color:green;">Box2</div>

Wenn ich nun zusätzlich die Breite festlege funktioniert es nicht mehr.

<div style="background-color:blue; float:left; width:100px;">Box1</div>
<div style="background-color:green; width:100px;">Box2</div>

Wieso ist das so? Wo ist mein Denkfehler?

Ich danke Euch für Eure Hilfe

 

[CPoly]

Wenn du genauer hin siehst, wirst du fest stellen, dass auch der erste Code nur den Anschein erweckt, dass die Element nebeneinander sind. Nur der Text des zweiten Div umfließt das erste Div, aber das zweite Div überdeckt sich mit dem ersten (Benutz mal Firebug oder gib dem zweiten Div "opacity:0.5;").

Wenn du die beiden nebeneinander haben willst, müssen beide floaten. Oder wovon ich in letzter Zeit Fan geworden bin: display:inline-block;. Das kommt aber auf den Anwendungsfall an. Denn bei inline-block richten sich die Elemente nach dem Textfluss und es kommt zu eventuell unerwünschten Abständen.

 

[frankmeisner]

Hallo CPOly,
vielen Dank für Deine schnelle Antwort. Ich habe es mit Firebug tatsächlich sehr gut feststellen können.

Ich werde nun beide divs floaten.

Vielen Dank für die schnelle Hilfe.

 

[djheke]

Hallo,

Float nur mit Breitenangebe.

#box1 ,  #box2 {
 float:left;
}

#box1 {
 width:200px;
}

#box2 {
 width:500px;
}

Edit: Sorry, hab wohl nicht richtig gelesen.