nicht angemeldet
Safari und float
suitHallo Ihrs.
Angenommen man erstellt einen div (parent) und packt in diesen 2 weitere divs (child). Sowohl dem Parent- als auch den Childdivs werden keine width zugewiesen. Wenn jetzt nun der erste Childdiv links und der zweite Childdiv rechts floatet spannt sich der Parentdiv über die ganze Seite Breite der Seite aus. Zumindest im Firefox und Internet Explorer jedoch nicht im Safari. Habt ihr ne Idee wieso und wie ichs ändern kann?
Hier nochmal ein Pseudocode:
<div id="Parent">
<div id="ChildLeft" style="float:left;"></div>
<div id="ChildRight" style="float:right;"></div>
</div>
Normalerweise würde ich die Weite des Parent-Div auf 100% setzen, da er aber einen Aussenabstand links/rechts haben soll kommt dasleider nicht in Frage. Man könnte auch noch nen Hüll-Div drumrum packen und mit padding arbeiten aber das is irgendwie nicht die optimale Lösung. Gebt mir ne optimale Lösung ;)
Würde mich über eine Antwort freuen und bedanke mich schonmal im Vorraus.
-
Hallo Ihrs.
Angenommen man erstellt einen div (parent) und packt in diesen 2 weitere divs (child). Sowohl dem Parent- als auch den Childdivs werden keine width zugewiesen. Wenn jetzt nun der erste Childdiv links und der zweite Childdiv rechts floatet spannt sich der Parentdiv über die ganze Seite Breite der Seite aus. Zumindest im Firefox und Internet Explorer jedoch nicht im Safari. Habt ihr ne Idee wieso und wie ichs ändern kann?
der parent-div spannt sich nicht auf, der nimmt per default die verfügbare breite ein
um safari ist das auch der fall, hätte ich nocht nicht anders beobachtet
Hier nochmal ein Pseudocode:
<div id="Parent">
<div id="ChildLeft" style="float:left;"></div>
<div id="ChildRight" style="float:right;"></div>
</div>Normalerweise würde ich die Weite des Parent-Div auf 100% setzen, da er aber einen Aussenabstand links/rechts haben soll kommt dasleider nicht in Frage. Man könnte auch noch nen Hüll-Div drumrum packen und mit padding arbeiten aber das is irgendwie nicht die optimale Lösung. Gebt mir ne optimale Lösung ;)
die frage ist was willst du erreichen?
und dass 100% und auto nicht das selbe sind, sollte klar seinbtw: parent und childleft, childright sind keine gute namen
was ist wenn du childleft rechts haben willst und childright links? - 2 css deklarationen ändern oder namen ändern, codereihenfolge ändern?
verschachtelte elemente haben immer eine eltern-kind-beziehung
wie wärs mit
#inhalt
#inhalt1
#inhalt2damit bis du flexibel beim layout ohne die ändern zu müssen, bei einem derart einfachen layout klingt das vielleicht trivial, aber je komplexer die sache desto einfacher ist es dann zu verstehen und auch später mal zu ändern
-
der parent-div spannt sich nicht auf, der nimmt per default die verfügbare breite ein
Ich möchte, dass der parent-div sich die ganze Breite nimmt. Das funktioniert im FF und im IE super wenn ein Child-Div links und ein anderes rechts floatet. Dann spannt sich das Parent-Div über die ganze Breite. Aber eben nicht im Safari.
die frage ist was willst du erreichen?
und dass 100% und auto nicht das selbe sind, sollte klar seinMir ist schon klar, dass nicht das gleiche ist. Ich möchte dass sich der Parent-Div über die ganze Breite aufspannt.
btw: parent und childleft, childright sind keine gute namen
Das sind auch nur Beispielnamen.
Hoffe mein Problem ist ein bischen klarer geworden.
-
Mir ist schon klar, dass nicht das gleiche ist. Ich möchte dass sich der Parent-Div über die ganze Breite aufspannt.
ich fürchte, ich kann dir immern och nicht folgen - die kinder sind doch in diesem fall für das verhalten des eltern-div völlig irrelevant
<div style="color: red;">blah</div>
das gibt dir in praktisch jedem browser einen roten div mit dem inhalt blah welcher über die volle verfügbare breite "gespannt" ist - ob da drinnen nun elemente floaten oder nicht ist egal
kannst du da vielleicht eine beispiel-seite erstellen?
-
Ok, schau dir folgende Seite mal im Firefox und im safari an: http://benjamin-ruehl.de/beispiel.html
Verstehst du jetzt was ich meine? Wichtig ist, dass die Position des Parent-Div's auf fixed bleibt.
-
Ok, schau dir folgende Seite mal im Firefox und im safari an: http://benjamin-ruehl.de/beispiel.html
Verstehst du jetzt was ich meine? Wichtig ist, dass die Position des Parent-Div's auf fixed bleibt.
#Parent{ position:fixed; }
das hast du einfach mal grob vorenthalten ;)
im übrigen ist dein kurzer code nicht valide - und gerade wenn er zum testen sein soll, wäre das ganze praktisch
-
So, jetzt ist es valide. Wobei ich bezweifel, dass es bei der Problemlösung eine große Rolle spielt ob der <style>-Tag das type-Attribut besitzt.
Hat jemand eine Idee wie ich das eigentliche Problem lösen kann?
-
So, jetzt ist es valide. Wobei ich bezweifel, dass es bei der Problemlösung eine große Rolle spielt ob der <style>-Tag das type-Attribut besitzt.
stichwort: quirksmode, in deinem fall wirs keine rolle spielen
Hat jemand eine Idee wie ich das eigentliche Problem lösen kann?
hatte ich schon genannt - dein problem ist position fixed - von dem du nichts erwähnt hast ursprünglich
positionierte elemente sind aus dem element-/textfluss entfernt - exakt das verursacht dein problem
-
Ok und was für eine Lösung würdest du vorschlagen?
-
Ok und was für eine Lösung würdest du vorschlagen?
wenn du einen hinweis drauf lieferst, was du überhaupt machen wirst, könnte es durchaus sein, dass es gute vorschläge regnen wird ;)
-
-
-
-
-
Hi,
Wichtig ist, dass die Position des Parent-Div's auf fixed bleibt.
Wichtig ist, dass du zu den Werten/Maszen, die dir wichtig sind, auch passende Angaben machst.
CSS 2.1, 10.3 Calculating widths and margins, 10.3.7 Absolutely positioned, non-replaced elements:
(Das gilt fuer fixed ebenso wie fuer absolute.)If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
"then the width is shrink-to-fit" ist hier das wichtige - mache das Element nur so breit, wie's noetig ist, damit der Inhalt reinpasst.
Und da du *weder* fuer width, noch fuer left und right eine Angabe gemacht hast - ist das Verhalten des Safari vollkommen korrekt IMHO.
Wenn du keine width-Angabe machen willst - dann lasse die Breite inplizit aus den left- und right-Angaben herleiten.
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
-
-
-
-