tag:forum.selfhtml.org,2005:/selfIE & float – SELFHTML-Forum2007-08-01T19:50:53Zhttps://forum.selfhtml.org/self/2007/aug/1/ie-float/1151121#m1151121kEv*Oliver0503@t-online.dehttp://kevin-dilly.de2007-08-01T11:07:27Z2007-08-01T11:07:27ZIE & float<p>Hallo liebe SELFHTMLer,</p>
<p>folgendes ist sicher lösbar:</p>
<p>...<br>
<style type="text/css"><br>
<!--<br>
body{<br>
margin:0; padding:0;<br>
}<br>
#container{<br>
margin:0 auto;<br>
width:60%;<br>
}<br>
#content{<br>
width:70%;<br>
float:left;<br>
}<br>
#sidebar{<br>
margin:0 0 0 70%;<br>
width:30%;<br>
font-size:80%;<br>
}<br>
#footer{<br>
clear:left;<br>
}<br>
--><br>
</style><br>
...</p>
<p>Das HTML dazu:</p>
<p>...<br>
<div id="container"><br>
<div id="content"><br>
<p>text</p><br>
</div><br>
<div id="sidebar"><br>
<p>text</p><br>
</div><br>
</div><br>
<div id="footer"><br>
<p>text</p><br>
</div><br>
</div><br>
...</p>
<p>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.</p>
<p>Kann mir einer erklären _WARUM_ ?</p>
<p>Den Double IE FLOAT BUG habe ich bereits kennengelernt, nun will ich wenigstens ersteinmal ein normales Float hinbekommen.</p>
<p>Was kann Ursache für das fehlerhafte Verhalten sein, und wie kann ich meinen Code korrigieren um das gewünschte Ergebniss zu erhalten?<br>
LG<br>
kev1n</p>
<div class="signature">-- <br>
SELFCODE:<br>
sh:( fo:| ch:? rl:° br:^ ie:{ mo:| va:) de:] zu:) ss:| ls:[ js:|<br>
---<br>
</div>
https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151125#m1151125Daniel2007-08-01T11:12:56Z2007-08-01T11:12:56ZIE & float<p>Ahoi kEv*,</p>
<blockquote>
<p>#container{</p>
</blockquote>
<p>clear:both;</p>
<blockquote>
<p>margin:0 auto;<br>
width:60%;<br>
}<br>
#content{</p>
</blockquote>
<p>margin:0;</p>
<blockquote>
<p>width:70%;<br>
float:left;<br>
}<br>
#sidebar{</p>
</blockquote>
<p>margin:0;<br>
float:right;</p>
<blockquote>
<p>width:30%;<br>
font-size:80%;<br>
}<br>
#footer{<br>
}</p>
</blockquote>
<p>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.</p>
<p>MfG</p>
https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151122#m1151122Gunnar Bittersmannself2006@gunnarbittersmann.dehttp://gunnarbittersmann.de/2007-08-01T11:23:59Z2007-08-01T11:23:59ZIE & float<p>Hello out there!</p>
<blockquote>
<p>#content{<br>
width:70%;<br>
float:left;<br>
}<br>
#sidebar{<br>
margin:0 0 0 70%;<br>
width:30%;<br>
font-size:80%;</p>
<p>Mein Problem ist, das die sidebar nciht gefloatet wird. […] Kann mir einer erklären _WARUM_ ?</p>
</blockquote>
<p>30% + 70% sind schon 100% Breite der umgebenden Box. Wie sollen #sidebar und #content da nebeneinander passen, wenn noch margin von #sidebar _dazu_kommt?</p>
<blockquote>
<p>Was kann Ursache für das fehlerhafte Verhalten sein,</p>
</blockquote>
<p>Welches fehlerhafte Verhalten? Da sie nicht nebeneinander passen, ist die #sidebar unter #content; works sa designed.</p>
<blockquote>
<p>und wie kann ich meinen Code korrigieren um das gewünschte Ergebniss zu erhalten?</p>
</blockquote>
<p>#sidebar keinen margin geben.</p>
<p>See ya up the road,<br>
Gunnar</p>
<div class="signature">-- <br>
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
</div>
https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151123#m1151123kEv*Oliver0503@t-online.dehttp://kevin-dilly.de2007-08-01T12:01:54Z2007-08-01T12:01:54ZIE & float<p>Hallo liebe SELFHTMLer,</p>
<blockquote>
<p>30% + 70% sind schon 100% Breite der umgebenden Box. Wie sollen #sidebar und #content da nebeneinander passen, wenn noch margin von #sidebar _dazu_kommt?</p>
</blockquote>
<p>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.</p>
<blockquote>
<blockquote>
<p>und wie kann ich meinen Code korrigieren um das gewünschte Ergebniss zu erhalten?</p>
</blockquote>
<p>#sidebar keinen margin geben.</p>
</blockquote>
<p>Das habe ich nun geändert! Es funktioniert.<br>
Ich habe die width Angabe der sidebar weggenommen. Und siehe da, es wird gefloatet.</p>
<p>Wäre das auch eine Lösung?<br>
Funktionieren ist ja bekanntliche das eine, aber korrekt das andere.</p>
<p>LG<br>
kev1n</p>
<div class="signature">-- <br>
SELFCODE:<br>
sh:( fo:| ch:? rl:° br:^ ie:{ mo:| va:) de:] zu:) ss:| ls:[ js:|<br>
---<br>
</div>
https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151124#m1151124Gunnar Bittersmannself2006@gunnarbittersmann.dehttp://gunnarbittersmann.de/2007-08-01T19:50:53Z2007-08-01T19:50:53ZIE & float<p>Hello out there!</p>
<blockquote>
<blockquote>
<p>30% + 70% sind schon 100% Breite der umgebenden Box. Wie sollen #sidebar und #content da nebeneinander passen, wenn noch margin von #sidebar _dazu_kommt?</p>
</blockquote>
<p>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.</p>
</blockquote>
<p>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 [<a href="http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap08.html" rel="nofollow noopener noreferrer">CSS2 §8</a>])</p>
<p>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.</p>
<blockquote>
<p>Ich habe die width Angabe der sidebar weggenommen.</p>
</blockquote>
<p>Damit gilt der Ausgangswert 'auto' [<a href="http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap10.html#heading-10.2%A0" rel="nofollow noopener noreferrer">CSS2 §10.2</a>]. #sidebar nimmt sich also nur nur die Breite, die noch zur Verfügung steht, so dass alles nebeneinander passt.</p>
<blockquote>
<p>Und siehe da, es wird gefloatet.</p>
</blockquote>
<p>See ya up the road,<br>
Gunnar</p>
<div class="signature">-- <br>
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
</div>