IE & float – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self IE & float Wed, 01 Aug 07 11:07:27 Z https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151121#m1151121 https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151121#m1151121 <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> IE & float Wed, 01 Aug 07 11:12:56 Z https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151125#m1151125 https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151125#m1151125 <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> IE & float Wed, 01 Aug 07 11:23:59 Z https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151122#m1151122 https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151122#m1151122 <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> IE & float Wed, 01 Aug 07 12:01:54 Z https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151123#m1151123 https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151123#m1151123 <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> IE & float Wed, 01 Aug 07 19:50:53 Z https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151124#m1151124 https://forum.selfhtml.org/self/2007/aug/1/ie-float/1151124#m1151124 <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>