IE & float

[kEv*]

Hallo liebe SELFHTMLer,

folgendes ist sicher lösbar:

...
<style type="text/css">
<!--
body{
 margin:0; padding:0;
 }
#container{
 margin:0 auto;
 width:60%;
 }
#content{
 width:70%;
 float:left;
 }
#sidebar{
 margin:0 0 0 70%;
 width:30%;
 font-size:80%;
 }
#footer{
 clear:left;
 }
-->
</style>
...

Das HTML dazu:

...
<div id="container">
  <div id="content">
    <p>text</p>
  </div>
  <div id="sidebar">
    <p>text</p>
  </div>
</div>
<div id="footer">
  <p>text</p>
</div>
</div>
...

Mein Problem ist, das die sidebar nciht gefloatet wird. Diese hat zwar das margin erhalten steht aber mit ihrer linken oberen Ecke an dem content div rechts unten.

Kann mir einer erklären _WARUM_ ?

Den Double IE FLOAT BUG habe ich bereits kennengelernt, nun will ich wenigstens ersteinmal ein normales Float hinbekommen.

Was kann Ursache für das fehlerhafte Verhalten sein, und wie kann ich meinen Code korrigieren um das gewünschte Ergebniss zu erhalten?
LG
kev1n

[Daniel]

Ahoi kEv*,

#container{

clear:both;

margin:0 auto;
width:60%;
}
#content{

margin:0;

width:70%;
float:left;
}
#sidebar{

margin:0;
float:right;

width:30%;
font-size:80%;
}
#footer{
}

So würd ich es mal probieren, allerdings könnte es zu rundungsfehler bei den prozent kommen das du insgesamt auf 100%+1px breite kommst.

MfG

[Gunnar Bittersmann]

Hello out there!

#content{
width:70%;
float:left;
}
#sidebar{
margin:0 0 0 70%;
width:30%;
font-size:80%;

Mein Problem ist, das die sidebar nciht gefloatet wird. […] Kann mir einer erklären _WARUM_ ?

30% + 70% sind schon 100% Breite der umgebenden Box. Wie sollen #sidebar und #content da nebeneinander passen, wenn noch margin von #sidebar _dazu_kommt?

Was kann Ursache für das fehlerhafte Verhalten sein,

Welches fehlerhafte Verhalten? Da sie nicht nebeneinander passen, ist die #sidebar unter #content; works sa designed.

und wie kann ich meinen Code korrigieren um das gewünschte Ergebniss zu erhalten?

#sidebar keinen margin geben.

See ya up the road,
Gunnar

[kEv*]

Hallo liebe SELFHTMLer,

30% + 70% sind schon 100% Breite der umgebenden Box. Wie sollen #sidebar und #content da nebeneinander passen, wenn noch margin von #sidebar _dazu_kommt?

Nun ja, aber die 70% bzw. die 30% beziehen sich doch aber auf das Container div. Also 70% von 60% des Containers und eben die 30% von den 60% des Containers.

und wie kann ich meinen Code korrigieren um das gewünschte Ergebniss zu erhalten?

#sidebar keinen margin geben.

Das habe ich nun geändert! Es funktioniert.
Ich habe die width Angabe der sidebar weggenommen. Und siehe da, es wird gefloatet.

Wäre das auch eine Lösung?
Funktionieren ist ja bekanntliche das eine, aber korrekt das andere.

LG
kev1n

[Gunnar Bittersmann]

Hello out there!

30% + 70% sind schon 100% Breite der umgebenden Box. Wie sollen #sidebar und #content da nebeneinander passen, wenn noch margin von #sidebar _dazu_kommt?

Nun ja, aber die 70% bzw. die 30% beziehen sich doch aber auf das Container div. Also 70% von 60% des Containers und eben die 30% von den 60% des Containers.

Und die 70% plus 30% füllen bereits die gesamte Breite des Containers (egal, ob der nun 60% oder sonstwas so breit ist wie der ihn umschließende Block. Dazu kam aber die Breite des margin. (Boxmodell [CSS2 §8])

70% (Breite von #content) + 30% (Breite von #sidebar) + 70% von 30% (margin von #sidebar bezogen auf #container) = 70% + 30% + 21% = 121%. Und das passt halt nicht nebeneinander.

Ich habe die width Angabe der sidebar weggenommen.

Damit gilt der Ausgangswert 'auto' [CSS2 §10.2]. #sidebar nimmt sich also nur nur die Breite, die noch zur Verfügung steht, so dass alles nebeneinander passt.

Und siehe da, es wird gefloatet.

See ya up the road,
Gunnar