Floating Problem

[Sven]

Hallo erstmal,

So sah es vorher aus:

+-----------------------+   Reihenfolge im HTML-Quelltext:
| head                  |      - head
+-----------------------+      - pane
+-----+ +---------------+      - seite
|pane | |seite          |      - foot
|     | |               |
|     | |               |
|     | |               |
+-----+ +---------------+
+-----------------------+
| foot                  |
+-----------------------+

pane war gefloatet (float:left), hatte eine feste Breite (etwa 200px), seite war "normal" positioniert, mit margin-left: breite(pane) = 200px. foot war clear:both.

Eigentlich war es soweit ganz gut, bis in die Seite mal inhalte reinkamen, die etwas in dieser "#seite" fließendes "clearen" wollten, also

+------------+ xxxxxxxxxxx
| float:left | xxxx
+------------+
[clear:both]xxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxx...

z.B. halt (sehr stark vereinfacht). Nun ist das Problem, dass das ganze - eingebaut in das Modell oben dann so aussieht:

(x = inhalt (sagen wir mal fließtext))

+----------------------------+
| xxxxxxxxxx...              |
+----------------------------+
+------+ +-------------------+
|xxxxxx| |xxxxxxxxxxxxxxxxxxx|
|xxxxxx| |+-float:left-+ xxxx|
|xxxxxx| |+------------+     |
|xxxxxx| |                   |
+------+ |                   |
         |[clear:left]xxxxxxx|
         |xxxxxxxxxxxxxxxxxxx|
         |....               |

Wie man also sieht, hat das clear zwar innerhalb von #site das weiterfloaten um dieses Ding verhindert, aber andererseits hat es den betroffenen Absatz/das betroffene Element unter das Ende von #pane geschoben - da es ja auch hier als clear wirkt.

Kann man hier irgendwie entgegenwirken?

Nein, dachte ich mir, denn clear bietet leider keine weiteren Einstellungsmöglichkeiten. Leider.

Also darf die #pane nicht mehr floaten. Um aber immernoch #pane und #seite nebeneinander stellen zu können (dass die Formatierung nur mittels CSS gemacht wird, versteht sich von selbst ;o), muss irgendetwas floaten. Was liegt also näher, als #seite zu floaten?

Gedacht, gemacht:

+-----------------------+   Reihenfolge im HTML-Quelltext:
| head                  |      - head
+-----------------------+      - seite
+-----+ +---------------+      - pane
|pane | |seite          |      - foot
|     | |               |
|     | |               |
|     | |               |
+-----+ +---------------+
+-----------------------+
| foot                  |
+-----------------------+

Die pane ist runtergerutscht im Quelltext, um "statisch" dazustehen, während #seite nun fröhlich vor sich hinfloaten soll.

_soll_. In der Realität ist natürlich alles ganz anders. #seite schnappt sich erstmal in allen 3 Testbrowsern (IE6, Opera7.5, Mozilla1.6) die gesamten 100% breite weg. Also muss ich die Breite festlegen. Mit beispielsweise 60% funktioniert alles wunderbar - aber genau das will ich nicht.

Das Problem ist: Was tun? Die #pane muss auf jeden Fall eine feste Breite (in px) behalten, die Breite von #seite soll variabel sein. Mit der Lösung jetzt geht das nicht, so wie's vorher war (#pane gefloatet) hätte es funktioniert, aber da ist ja dieses dumme clear-problemchen.

Hat jemand einen Rat für mich?

Danke schon mal,

Sven

[Webblob]

Hallo Sven,

Hat jemand einen Rat für mich?

lasse pane left floaten und gebe seite einen margin-left: [breite von pane + borderbreite pane] px. Du brauchst für seite keine explizite Breite angeben.

Gruß Gunther

[Sven]

Hallo Gunther,

Hat jemand einen Rat für mich?
lasse pane left floaten und gebe seite einen margin-left: [breite von pane + borderbreite pane] px. Du brauchst für seite keine explizite Breite angeben.

Genau das war ja auch meine Lösung. Aber durch ein clear irgendwo in pane wird das betroffene Element in seite ja unter pane geschoben, wie ich in meinem Posting ausführlich beschrieben habe!

Gruß,

sven

[Webblob]

Hallo Sven,

Hat jemand einen Rat für mich?
lasse pane left floaten und gebe seite einen margin-left: [breite von pane + borderbreite pane] px. Du brauchst für seite keine explizite Breite angeben.

Genau das war ja auch meine Lösung. Aber durch ein clear irgendwo in pane wird das betroffene Element in seite ja unter pane geschoben, wie ich in meinem Posting ausführlich beschrieben habe!

ja sorry, irgendwie hab' ich nicht richtig gelesen. Aber mal eine ganz andere Frage: Warum brauchst du denn ein clear, wenn in seite etwas floatet (also bspw. Text um ein Bild)?

Gruß Gunther

[Sven]

Hallo Gunther,

Warum brauchst du denn ein clear, wenn in seite etwas floatet (also bspw. Text um ein Bild)?

so etwas nennt sich "Design", dass z.B. bei einem Absatz einfach mal etwas floaten soll, und danach nicht mehr. Siehe folgende Abbildung

+----------+ XXXXXXX
|          | xxxxxxxxxxxxxxxx
|          | xxxxxxxxxxxxxxxx
+----------+ xxxxxxxxxxx

+----------+ XXXXXX
|          | xxxxxxxxx
|          |
+----------+

+----------+
| ...

Oder konkret auf diesen Einzelfall bezogen: Design.

<form>
<div class="bla">
  <label>Bezeichnung</label>
  <div>was man machen kann<br><input></div>
</div>
<div class="bla">
  <label>Bezeichnung</label>
  <div><input</div>
</div>
</form>

Bezeichnung  Was man machen kann
             [INPUT]

Bezeichnung  [INPUT]

Hierbei floaten jeweils die <labels> links und die <div class="bla">'s haben ein clear.

Es gibt noch zig tausend andere Beispiele. Wenn du fast perfektionistisch Style/Content-Trennung betreibst und was nebeneinander stellen willst, ist float unumgänglich. Entsprechend auch clear.

Gruß,

Sven

[Efchen]

Moin,

Hat jemand einen Rat für mich?
lasse pane left floaten und gebe seite einen margin-left: [breite von pane + borderbreite pane] px. Du brauchst für seite keine explizite Breite angeben.

Genau das war ja auch meine Lösung. Aber durch ein clear irgendwo in pane wird das betroffene Element in seite ja unter pane geschoben, wie ich in meinem Posting ausführlich beschrieben habe!

Das habe ich schon in Deinem Ursprungsposting nicht verstanden.
Wenn Du Deiner #seite ein margin-left mitgibst, dann geht NICHTS links unter #pane, wenn Du ein clear machst, weil das nicht möglich ist, weil Dein #seite ja erst einige Pixel weiter rechts anfängt.

Nur, wenn Du Dein margin-left weglässt, und nur dann geht der Text nach dem Ende von #pane oder bei einem clear unter #pane weiter.

Also eigentlich genau umgekehrt, wie Du eigentlich ursprünglich beschrieben hast.

Gruß,
-Efchen

[Sven]

Moin Elfchen,

Hat jemand einen Rat für mich?
lasse pane left floaten und gebe seite einen margin-left: [breite von pane + borderbreite pane] px. Du brauchst für seite keine explizite Breite angeben.
Genau das war ja auch meine Lösung. Aber durch ein clear irgendwo in pane wird das betroffene Element in seite ja unter pane geschoben, wie ich in meinem Posting ausführlich beschrieben habe!
Das habe ich schon in Deinem Ursprungsposting nicht verstanden.
Wenn Du Deiner #seite ein margin-left mitgibst, dann geht NICHTS links unter #pane, wenn Du ein clear machst, weil das nicht möglich ist, weil Dein #seite ja erst einige Pixel weiter rechts anfängt.

ok, ich habe mich falsch ausgedrückt. natürlich wandert es nicht plötzlich links unter die pane, sondern ein abstand in #seite entsteht, und das ding, wo clear ist, geht auf der horizontalen Höhe des endes von #pane weiter. Also eigentlich das zu erwartene Verhalten, wie auch das Codebeispiel von Fritz ([pref:t=84452&m=495301]) zeigt.

Im Bild (groß):

XXXPANEXXXXXXXX  XXXSEITEXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX  Noch haben wir hier wunder-
XXXXXXXXXXXXXXX  bar normalen Inhalt, aber
XXXXXXXXXXXXXXX  schon bald erfolgt das
XXXXXXXXXXXXXXX  style="clear:both"-element:
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
                 Hier ist nun das clear:both-
                 Element. Und erst hier geht's
                 auf unserer Seite weiter. Darüber
                 haben wir viel Freiraum. Klar, es
                 ist zwar so eigentlich "richtig", aber
                 im Grunde genommen müsste man bei
                 clear: mehr angaben machen können, bzw.
                 es wäre intelligent (geht ja nicht).
                 Denn sagen wir in #seite wiederum
                 floatet irgendetwas, das lässt sich ja
                 dann nicht clear-en, ohne dass gleichzeitig
                 auch das "gesamtfloat" von #pane um #seite
                 gecleart wird.
                 Der Clear:both-Abstatz schiebt sich (mehr oder
                 weniger selbstverständlich) nicht direkt links unter
                 #pane - ist ja klar, es ist ja auch ein margin-left angegeben.

Nur, wenn Du Dein margin-left weglässt, und nur dann geht der Text nach dem Ende von #pane oder bei einem clear unter #pane weiter.

genau.

Also eigentlich genau umgekehrt, wie Du eigentlich ursprünglich beschrieben hast.

nein.

!?

Gruß,

Sven

[Fritz]

Hallo Sven,

XXXPANEXXXXXXXX  XXXSEITEXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX  Noch haben wir hier wunder-
XXXXXXXXXXXXXXX  bar normalen Inhalt, aber
XXXXXXXXXXXXXXX  schon bald erfolgt das
XXXXXXXXXXXXXXX  style="clear:both"-element:
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
                 Hier ist nun das clear:both-
                 Element. Und erst hier geht's
                 auf unserer Seite weiter. Darüber
                 haben wir viel Freiraum.

also das, was Du hier zeichnest, nämlich der Freiraum, ist ohne _deinen_ code nur schwer nachzuvollziehen. ein clear:both alleine bringt so etwas nicht zustande.
Laß uns doch einfach an Deinem Code teilhaben, vielleicht gibt's dann eher eine Erklärung dafür

Gruß Fritz

[Ingo Turski]

Hi,

also das, was Du hier zeichnest, nämlich der Freiraum, ist ohne _deinen_ code nur schwer nachzuvollziehen. ein clear:both alleine bringt so etwas nicht zustande.

ich kann das schon nachvollziehen und ein clear bringt das sehr wohl zustande.

freundliche Grüße
Ingo

[Fritz]

Hallo,

vielleicht wäre es am einfachsten, wenn sven noch einmal darstellen könnte, was genau er will, und nicht, was er alles _nicht_ will.
Ich versteh's nämlich inzwischen nicht mehr.

Gruß Fritz

[Sven]

Hallo Fritz,

vielleicht wäre es am einfachsten, wenn sven noch einmal darstellen könnte, was genau er will, und nicht, was er alles _nicht_ will.
Ich versteh's nämlich inzwischen nicht mehr.

OK, noch mal ganz vom Anfang an: Ich will ein DESIGN, bei dem links ein Bereich ist,
dessen Breite in px fest definiert ist. Das ist die #pane. Daneben möchte ich gerne
einen Bereich, der den gesamten restlichen horizontalen Bereich "verbraucht", die #seite.
In #seite kommt der INHALT der Seite. In #pane anderes Zeugs (pane ^= Seitenleiste).

Und nun könnte es ja mal vorkommen (und es kommt auch vor), dass bei #seite relativ
weit oben, also da, wo noch links die #pane zu sehen ist, mal als INHALT sowas kommt:

<div style="float:left;">Dudldudl...</div>
<p>Blablabla   blablablab lablablabalba lbl .....</p>
<p style="clear: both;">Und nun fertig mit dem dudl!</p>

Jetzt will ich VERMEIDEN, dass der Paragraph, der gerne will, dass kein dudl mehr da ist,
_horizontal_gesehen_ unter #pane rutscht.

So wie auch ein Beispiel auf Ingos Seite ([pref:t=84452&m=495506] <- da verlinkt) zeigt.

Capito?

Gruß,

sven

[Fritz]

Hallo,

Jetzt will ich VERMEIDEN, dass der Paragraph, der gerne will, dass kein dudl mehr da ist,
_horizontal_gesehen_ unter #pane rutscht.

Capito?

No!
Du meinst vermutlich _vertikal_ (oben/unten)
Damits horizontal (rechts/links) nicht "rutscht", genügt margin-left.

Gruß Fritz

[Sven]

Hello Fritz,

Jetzt will ich VERMEIDEN, dass der Paragraph, der gerne will, dass kein dudl mehr da ist,
_horizontal_gesehen_ unter #pane rutscht.
No!
Du meinst vermutlich _vertikal_ (oben/unten)
Damits horizontal (rechts/links) nicht "rutscht", genügt margin-left.

ehmm... - ja, genau.

Das Problem ist aber mittlerweile mittels einem kleinen "Workaround", siehe [pref:t=84452&m=495652] und folgende, gelöst.

Gruß,

sven

[Fritz]

Hallo Sven,

mit Deinen Angaben kann ich das Problem nicht nachvollziehen.
Folgendes (dirty) Codeschnipsel sollte so tun wie Du das wünschst (zumindest wie ich Dich verstanden habe):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div style="float:left; width:200px;border:1px solid red">
 <p>pane<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nullafacilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
<div style="border:1px solid red;margin-left:220px;">
 <img style="float:left;" src="0.gif" width="100" height="100">
 <p>seite
 <br style="clear:both">clear
</div>

</body>
</html>

Gruß Fritz

[sven]

Hallo Fritz,

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div style="float:left; width:200px;border:1px solid red">
 <p>pane<br>...
</div>
<div style="border:1px solid red;margin-left:220px;">
 <img style="float:left;" src="0.gif" width="100" height="100">
 <p>seite
 <br style="clear:both">clear
</div>
Folgendes (dirty) Codeschnipsel sollte so tun wie Du das wünschst (zumindest wie ich Dich verstanden habe):

genau so ist es auch auf meiner Seite (Also gaaanz grob, genau). "clear" schiebt sich dann unter das Ende von <div>. Also horizontal gesehen. Genau!

Und genau soetwas will ich umgehen. Wie?

Gruß,

Sven

[Ingo Turski]

Hi,

genau so ist es auch auf meiner Seite (Also gaaanz grob, genau). "clear" schiebt sich dann unter das Ende von <div>. Also horizontal gesehen. Genau!

sieh' Dir mal auf http://www.1ngo.de/web/clear.html das dritte Beispiel an. Das "funktioniert" z.Z. noch in allen (modernen) Browsern.
Eine andere und vor allem auch zukünftig sichere Lösung wäre, #seite rechts floaten zu lassen und zuerst in den Quelltext zu schreiben und #pane dann über margin-right auf Abstand zu halten. Dann kannst Du in #seite nach Belieben clear:left einsetzen.

freundliche Grüße
Ingo

[Sven]

Hallo Ingo,

genau so ist es auch auf meiner Seite (Also gaaanz grob, genau). "clear" schiebt sich dann unter das Ende von <div>. Also horizontal gesehen. Genau!
sieh' Dir mal auf http://www.1ngo.de/web/clear.html

Tolle Seite! - das beschriebene "Problem" ist genau das, was ich habe.

das dritte Beispiel an. Das "funktioniert" z.Z. noch in allen (modernen) Browsern.

Aber es ist in der Breite nicht variabel. Bzw. schon variabel, aber es lässt sich keine variable rechte seite angeben und eine nicht-variabele linke seite.

(variabel = variabele Breite/maximale - || nicht variabel = feste breite [px-angabe])

Eine andere und vor allem auch zukünftig sichere Lösung wäre, #seite rechts floaten zu lassen und zuerst in den Quelltext zu schreiben und #pane dann über margin-right auf Abstand zu halten.

hmm... ja, das hört sich gar nicht schlecht an, das Problem ist nur, dass ich #seite eine Breitenangabe machen müsste. Und das "geht" nicht, wenn ich die ganze Seite variabel halten möchte, was ich eigentlich vor hatte (ich glaube, ich kann's sowieso vergessen ;).

Nur ist es ja so, dass #pane die feste Breite 200px hat, und #seite den ganzen restlichen platz, der daneben verfügbar ist, an sich reißen soll.

Und das ging eben so wundervoll, als #pane noch links gefloatet war.

Dann kannst Du in #seite nach Belieben clear:left einsetzen.

und wenn ich alles richtig verstanden habe auch clear:right.

Jetzt fällt mir gerade was zu deiner Methode, die du auf http://www.1ngo.de/web/clear.html beschrieben hast, ein: Ich könnte eigentlich in #seite ein <div> machen, dass float:right; ist. Dann würde es ja da drin floaten, dieser Bug vielleicht funktionieren - und das wäre dann eine Lösung.

Basiert aber nur auf einer Annahme - das werde ich aber gleich mal ausprobieren.

Gruß,

Sven

[Sven]

Hallo!!!

juhu! Meine hier angesprochene Lösung funktioniert!:

Jetzt fällt mir gerade was zu deiner Methode, die du auf http://www.1ngo.de/web/clear.html beschrieben hast, ein: Ich könnte eigentlich in #seite ein <div> machen, dass float:right; ist. Dann würde es ja da drin floaten, dieser Bug vielleicht funktionieren - und das wäre dann eine Lösung.

Also, als direktes Codebeispiel:

<div id="pane">
  dumdidum
</div>
<div id="seite">
  <div id="seite-float">
      Jeder Inhalt hier drin kann floaten wie er will!
  </div>
</div>

#pane { width: 190px; float: left; }
#seite-float { float: right; width: 100%; }

Diese modifizierte Version von Ingos habe ich erfolgreich mit

- Opera7.5 (= Opera)
  - IE6 (=IE5/5.5/6)
  - Mozilla 1.6 (=mozilla)

getestet

:))

Gruß,

Sven

[Ingo Turski]

Hi,

juhu! Meine hier angesprochene Lösung funktioniert!:

gratuliere. Auf so ein Idee war ich noch gar nicht gekommen. Allerdings ändert sich ja auch hier nichts daran, daß irgend eine künftige Browserversion das clear doch noch anders interpretieren könnte. Aber bis dahin funktioniert's.

freundliche Grüße
Ingo

[Sven]

Hi Ingo,

juhu! Meine hier angesprochene Lösung funktioniert!:
gratuliere. Auf so ein Idee war ich noch gar nicht gekommen. Allerdings ändert sich ja auch hier nichts daran, daß irgend eine künftige Browserversion das clear doch noch anders interpretieren könnte. Aber bis dahin funktioniert's.

stimmt, das ganze beruht natürlich auf den eigentlichen Interpretationsfehlern der Browser - aber immerhin funktioniert es mit diesem feste-breite/variable-breite-Mix.

Aber bis die künftigen Browser das richtig interpretieren, wird CSS3 hoffentlich etwas detailliertere Möglichkeiten der clear-Definierung bieten (also z.B. bis in welche väterliche Ebene gecleart werden soll), die von diesen Browsern auch unterstützt wird.

Gruß,

sven

[Ingo Turski]

Hi,

wird CSS3 hoffentlich etwas detailliertere Möglichkeiten der clear-Definierung bieten (also z.B. bis in welche väterliche Ebene gecleart werden soll), die von diesen Browsern auch unterstützt wird.

das wäre schon wünschenswert, zumal viele Webseitenersteller eigentlich davon ausgehen, daß so etwas selbstverständlich sei - bis sie halt irgendwann meist eher zufällig auf dieses Problem stoßen.

Eine weitere Möglichkeit hatte ich übrigens noch nicht erwähnt: je nach Konstruktion der Seite kann auch die absolute Positionierung des Menüs über top:0; left:0 zum Elternelement ohne Nebenwirkungen helfen. Aber vielleicht erweitere ich meine Seite ja mal und gebe hier auch die Lösungsansätze...

freundliche Grüße
Ingo

[Sven]

Hi Ingo,

wird CSS3 hoffentlich etwas detailliertere Möglichkeiten der clear-Definierung bieten (also z.B. bis in welche väterliche Ebene gecleart werden soll), die von diesen Browsern auch unterstützt wird.
das wäre schon wünschenswert, zumal viele Webseitenersteller eigentlich davon ausgehen, daß so etwas selbstverständlich sei - bis sie halt irgendwann meist eher zufällig auf dieses Problem stoßen.
Eine weitere Möglichkeit hatte ich übrigens noch nicht erwähnt: je nach Konstruktion der Seite kann auch die absolute Positionierung des Menüs über top:0; left:0 zum Elternelement ohne Nebenwirkungen helfen. Aber vielleicht erweitere ich meine Seite ja mal und gebe hier auch die Lösungsansätze...

genau. Ursprünglich hatte ich meine Seite, die ja einen head (100% width), einen foot (100% width), dann eben diese pane links und den content (#site) rechts hat, per absoluter positionierung formatiert, d.h. #pane war absolut positioniert und #site mit margins ausgerichtet. Damit hatte ich eigentlich keine Probleme, außer wenn der eigentliche Seiteninhalt extrem kurz war/ist, denn dann kommt die #pane in den #foot rein.

So long,

sven

[Fritz]

Hallo Sven,

genau so ist es auch auf meiner Seite (Also gaaanz grob, genau). "clear" schiebt sich dann unter das Ende von <div>. Also horizontal gesehen. Genau!

Und genau soetwas will ich umgehen. Wie?

dann lass das clear einfach weg, und geb dem Inhalt Deines Text-divs einen margin-left. (Also irgenwie hab ich Schwierigkeiten, zu verstehen, was genau Du willst)

<div style="float:left; width:200px;border:1px solid red">
 <p>pane<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div style="border:1px solid red;margin-left:220px;">
 <img style="float:left;" src="0.gif" width="100" height="100">
 <p style="margin-left:120px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Gruß Fritz