Zwei Div's nebeneinander, aber wie?

[Thomas Markus]

Hallo Leute,

wie kann ich zwei div's nebeneinander bringen?

kann man auf einer Seite per HTML sagen, dass die Inhalte einer anderen Seite (z.B. alles im Body) ohne Frames eingebunden werden soll? ähnl. wie include.

Danke, Thomas.

[Ole]

hi

wie kann ich zwei div's nebeneinander bringen?

indem du sie via CSS nebeneinander positionierst.
deine stichworte dürften "position" und "absolut" bzw. "relative" ff. sein.

kann man auf einer Seite per HTML sagen, dass die Inhalte einer anderen Seite (z.B. alles im Body) ohne Frames eingebunden werden soll? ähnl. wie include.

du meinst sowas wie "iframe" ?
allerdings ist ein iframe auch nur ein frame, allerdings ist afaik mit HTML sonst nichts in der richtung möglich.

so long
ole
(8-)>

[Ingo Turski]

Hi,

wie kann ich zwei div's nebeneinander bringen?

float

kann man auf einer Seite per HTML sagen, dass die Inhalte einer anderen Seite (z.B. alles im Body) ohne Frames eingebunden werden soll? ähnl. wie include.

Nein (wenn Du auch iframes ausschließt). Verwende eine server- oder editorseitige include-Funktion.

freundliche Grüße
Ingo

[Thomas Markus]

Hallo,

wie kann ich zwei div's nebeneinander bringen?
float

könntest du dich da noch etwas mehr zu auslassen, bitte?
ich versteh das nämlich nicht so wirklich.

kann man auf einer Seite per HTML sagen, dass die Inhalte einer anderen Seite (z.B. alles im Body) ohne Frames eingebunden werden soll? ähnl. wie include.
Nein (wenn Du auch iframes ausschließt). Verwende eine server- oder editorseitige include-Funktion.

Soso, schade, vielen Dank.

Danke, Thomas.

[Ole]

hi

http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

so long
ole
(8-)>

[Siechfred]

Hallo.

wie kann ich zwei div's nebeneinander bringen?

Auf verschiedene Arten. Denkbar wäre die Anordnung nebeneinander per CSS-Eigenschaft float, denkbar wäre auch, das rechte div mit einem entsprechenden linken Abstand zu versehen. Hierzu zwei stark vereinfachte Beispiele, die du natürlich noch an deine Bedürfnisse anpassen musst:

• Variante 1 -
  <div style="float:left">
    <!-- Linker Container -->
  </div>
  <div>
    <!-- Rechter Container -->
  </div>

• Variante 2 -
  <div style="width:10em">
    <!-- Linker Container -->
  </div>
  <div style="margin-left:10em">
    <!-- Rechter Container -->
  </div>

kann man auf einer Seite per HTML sagen, dass die Inhalte einer anderen Seite (z.B. alles im Body) ohne Frames eingebunden werden soll? ähnl. wie include.

Nein.

Grüße
Siechfred

[entropie]

Hallo.

• Variante 1 -
  <div style="float:left">
    <!-- Linker Container -->
  </div>
  <div>
    <!-- Rechter Container -->
  </div>

Damit bin ich einverstanden ;)

• Variante 2 -
  <div style="width:10em">
    <!-- Linker Container -->
  </div>
  <div style="margin-left:10em">
    <!-- Rechter Container -->
  </div>

Damit nicht.
Da sollte für das erste ne absolute positionierung folgen: position:absolut; top:xpx; left:xpx oder so.
Ansonsten würden die auch untereinander stehen.

kann man auf einer Seite per HTML sagen, dass die Inhalte einer anderen Seite (z.B. alles im Body) ohne Frames eingebunden werden soll? ähnl. wie include.

Nein.

Das geht zwar nicht mit HTML, allerdings mit dem HTTP-Server unseres Vertrauens: http://httpd.apache.org/docs-2.0/mod/mod_include.html

mfg, entropie

[wahsaga]

hi,

Damit nicht.
Da sollte für das erste ne absolute positionierung folgen: position:absolut; top:xpx; left:xpx oder so.
Ansonsten würden die auch untereinander stehen.

[X] du möchtest dich infomieren, was float bewirkt, bevor du hier so einen unfug erzählst.

gruss,
wahsaga

[entropie]

Moin

hi,
[X] du möchtest dich infomieren, was float bewirkt, bevor du hier so einen unfug erzählst.

Wer lesen kann...
Wenn du es denn getan hättest würdest du wissen das er _ZWEI_ beispiele gebracht hat, und nur in _EINEM_ von denen FLOAT benutzt wurden ist.
Ich weiss sehr wohl was float bewirkt und danke für gespräch
entropie

[wahsaga]

hi,

Wenn du es denn getan hättest würdest du wissen das er _ZWEI_ beispiele gebracht hat, und nur in _EINEM_ von denen FLOAT benutzt wurden ist.

stimmt, hast recht.

gruss,
wahsaga

[MudGuard]

Hi,

Da sollte für das erste ne absolute positionierung folgen: position:absolut; top:xpx; left:xpx oder so.

top und left wären hier (auch mit korrekten Werten) natürlich wirkungslos, denn die wirken nur bei anderen position-Werten als static.
Ja, hier wird static zum Einsatz kommen, denn ungültige Werte müssen ignoriert werden, also z.B. auch 'absolut' - im Gegensatz zu 'absolute'

cu,
Andreas

[entropie]

Moin,

naja gut, hat halt doch n och wer nen schreibfehler gefunden ;)

[Thomas Markus]

Hallo entropie,

kann man auf einer Seite per HTML sagen, dass die Inhalte einer anderen Seite (z.B. alles im Body) ohne Frames eingebunden werden soll? ähnl. wie include.
Das geht zwar nicht mit HTML, allerdings mit dem HTTP-Server unseres Vertrauens: http://httpd.apache.org/docs-2.0/mod/mod_include.html

Hm, wer soll denn daraus klug werden?
Das ist mir dann doch zu hoch.

Müssen da den irgendwelche Vorraussetzungen für herrschen?
z.B. bestimmte Rechte am Server?

Und könntest du mal kurz sagen, wie das so grob geht?

Danke und Gruß, Thomas Markus.

[Ingo Turski]

Hi,

• Variante 1 -
  <div style="float:left">
    <!-- Linker Container -->

hier fehlt width,

<div>
  <!-- Rechter Container -->

und hier fehlt margin-left.

• Variante 2 -
  <div style="width:10em">
    <!-- Linker Container -->

hier fehlt zur abwechslung float,

</div>
<div style="margin-left:10em">
  <!-- Rechter Container -->

dafür stimmt aber hier alles (sofern man die DIVs nahtlos aneinndersetzen will.

freundliche Grüße
Ingo

[Siechfred]

Hallo Ingo.

Ich hatte ausdrücklich darauf hingewiesen, dass es sich um stark verkürzte Beispiele handelt , mir war schon klar, dass da noch Angaben fehlen. Mir ging es lediglich um die Platzierung der wesentlichen Eigenschaften (float in Variante 1 und margin-left in Variante 2).

• Variante 1 -
  <div style="float:left">
    <!-- Linker Container -->
  hier fehlt width,

Nein, wozu?

<div>
  <!-- Rechter Container -->
und hier fehlt margin-left.

Nein, auch hier die Frage, wozu?

• Variante 2 -
  <div style="width:10em">
    <!-- Linker Container -->
  hier fehlt zur abwechslung float,

Auch diese Container werden nebeneinander dargestellt, zwar vertikal versetzt, aber wie gewünscht nebeneinander.

Zum Nachsehen: http://www.siechfreds-welt.de/selftest/nebeneinander.html

Grüße
Siechfred

[MudGuard]

Hi,

<div style="float:left">
hier fehlt width,
Nein, wozu?

Doch, da float zwingend eine explizite Breitenangabe erfordert.
http://www.w3.org/TR/REC-CSS2/visuren.html#floats, zweiter Absatz im Abschnitt 9.5

cu,
Andreas

[Siechfred]

Hallo Andreas.

Doch, da float zwingend eine explizite Breitenangabe erfordert.
http://www.w3.org/TR/REC-CSS2/visuren.html#floats, zweiter Absatz im Abschnitt 9.5

Stellt sich mir die Frage, wie eine korrekte Darstellung bei fehlender Breitenangabe aussieht. Die Browser, die mir hier zum Testen zur Verfügung stehen (Mozilla 1.4, Mozilla 1.5, Opera 7.22 und IE 6.0 und sogar der NN 4.78) stellen die zwei Container jedenfalls nebeneinander dar. Auf der von dir verlinkten Seite versagen meine Englischkenntnisse allerdings auf der Suche nach einer Antwort :-) Und nebenbei erschließt sich mir die Notwendigkeit einer Breitenangabe nicht so recht.

Grüße
Siechfred

[MudGuard]

Hi,

Doch, da float zwingend eine explizite Breitenangabe erfordert.
http://www.w3.org/TR/REC-CSS2/visuren.html#floats, zweiter Absatz im Abschnitt 9.5

Stellt sich mir die Frage, wie eine korrekte Darstellung bei fehlender Breitenangabe aussieht. Die Browser, die mir hier zum Testen zur Verfügung stehen (Mozilla 1.4, Mozilla 1.5, Opera 7.22 und IE 6.0 und sogar der NN 4.78) stellen die zwei Container jedenfalls nebeneinander dar. Auf der von dir verlinkten Seite versagen meine Englischkenntnisse allerdings auf der Suche nach einer Antwort :-) Und nebenbei erschließt sich mir die Notwendigkeit einer Breitenangabe nicht so recht.

Die Breitenangabe ist aus folgendem Grund nötig:

OHNE die Breitenangabe wäre ein blocklevel-Element (zumindest in der Theorie) so breit wie möglich, es nähme in der Breite also den vorhandenen Platz ein. Also wäre eigentlich kein Platz mehr sein, um irgendwas daneben fließen zu lassen.

Die Vorschrift sagt (m.E.): damit float angewendet wird, ist eine explizite Breite anzugeben (wenn das Element nicht sowieso eine explizite Breite hat, was z.B. bei Bildern der Fall ist). Fehlt die Breitenangabe (bzw. die explizite Breite), darf nicht gefloatet werden.

cu,
Andreas

[Siechfred]

Hallo nochmal,

OHNE die Breitenangabe wäre ein blocklevel-Element (zumindest in der Theorie) so breit wie möglich, es nähme in der Breite also den vorhandenen Platz ein. Also wäre eigentlich kein Platz mehr sein, um irgendwas daneben fließen zu lassen.

Gut, die Theorie klingt logisch.

Die Vorschrift sagt (m.E.): damit float angewendet wird, ist eine explizite Breite anzugeben (wenn das Element nicht sowieso eine explizite Breite hat, was z.B. bei Bildern der Fall ist). Fehlt die Breitenangabe (bzw. die explizite Breite), darf nicht gefloatet werden.

Hm, das würde ja dann bedeuten, dass die von mir genannten Browser die Vorgabe nicht umsetzen. Gibt es einen bekannten Browser, der diese Theorie in die Praxis umsetzt? Ach ja, und wie ist in diesem Zusammenhang dieser Abschnitt zu verstehen:

http://www.w3.org/TR/REC-CSS2/visudet.html#q8

Oder bin ich völlig auf dem Holzweg?

Grüße
Siechfred

[Ingo Turski]

Hi,

Fehlt die Breitenangabe (bzw. die explizite Breite), darf nicht gefloatet werden.

Hm, das würde ja dann bedeuten, dass die von mir genannten Browser die Vorgabe nicht umsetzen. Gibt es einen bekannten Browser, der diese Theorie in die Praxis umsetzt?

mir ist zumindest keiner bekannt (allerdings stellt Opera in Deinem 1. Beispiel die floatende Box dann höher dar).
Das heißt aber noch nicht, daß man deswegen auf eine width-Angabe verzichten sollte, denn Browser entwickeln sich ja weiter... Übrigens erinnere ich mich an ein Beispiel von Wahsaga mit der gleichen Thematik.

Dein 2. Beispiel übrigens setzt die Boxen nicht nebeneinander, sondern - zwar mit Abstand - untereinander. Ich finde schon, daß das ein Unterschied ist.

Ach ja, und wie ist in diesem Zusammenhang dieser Abschnitt zu verstehen:

http://www.w3.org/TR/REC-CSS2/visudet.html#q8

Oder bin ich völlig auf dem Holzweg?

Nö. Das untermauert eigentlich nur die Aussage, daß width bei float erforderlich ist - und daß sich die Browser (noch) nicht daran halten.

freundliche Grüße
Ingo

[molily]

Hallo,

Das untermauert eigentlich nur die Aussage, daß width bei float erforderlich ist - und daß sich die Browser (noch) nicht daran halten.

Die Browser halten sich offenbar bewusst nicht daran, weil die Browsreprogrammierer diese Regelung für praktischen Unfug halten. Ich denke nicht, dass sie diese Meinung radikal ändern werden.

Weiterentwicklung muss nicht Verbesserung heißen.

Mathias

[Ingo Turski]

Hi,

Die Browser halten sich offenbar bewusst nicht daran, weil die Browsreprogrammierer diese Regelung für praktischen Unfug halten. Ich denke nicht, dass sie diese Meinung radikal ändern werden.

da kann was dran sein...  denn wenn jemand für ein Element float definiert, sollte dies zumindest die Absicht implizieren, nachfolgende Elemente daneben zu platzieren.

freundliche Grüße
Ingo

[Siechfred]

Hallo Ingo.

Dein 2. Beispiel übrigens setzt die Boxen nicht nebeneinander, sondern - zwar mit Abstand - untereinander. Ich finde schon, daß das ein Unterschied ist.

Ja, da hast du recht, aber die Feinarbeit wollte ich eben dem OP überlassen ;-) Falls er hier noch mitliest, würde mich jedenfalls mal sein Ergebnis interessieren.

Grüße
Siechfred

[molily]

Hallo,

Und nebenbei erschließt sich mir die Notwendigkeit einer Breitenangabe nicht so recht.

Die Breitenangabe ist aus folgendem Grund nötig:

OHNE die Breitenangabe wäre ein blocklevel-Element (zumindest in der Theorie) so breit wie möglich, es nähme in der Breite also den vorhandenen Platz ein. Also wäre eigentlich kein Platz mehr sein, um irgendwas daneben fließen zu lassen.

Das erklärt, warum die Breitenangabe im System der Spec nötig ist, damit die Theorie kohärent ist. Die anderen damit verzahnten Regeln der Spec fordern notwendigerweise dieses Verhalten. Natürlich ist es logisch, das ist nicht die Frage. So logisch, wie bei x+y=z y=1 sein muss, wenn ich x=2 und z=3 vorgebe. Diese Erkenntnis hilft kein bisschen weiter.

Es erklärt und rechtfertigt nämlich nicht, warum das System so ist, wie es ist. Wenn ich eine Regel ohne Ausnahme schaffe, die die Berechnung der Breite von Blockelementen betrifft, muss ich zwangsläufig eine Regel schaffen, die width bei float fordert. Warum aber so eine Regle schaffen? Warum gerade 2 und 3 vorgeben?

Mathias

[MudGuard]

Hi,

Es erklärt und rechtfertigt nämlich nicht, warum das System so ist, wie es ist. Wenn ich eine Regel ohne Ausnahme schaffe, die die Berechnung der Breite von Blockelementen betrifft, muss ich zwangsläufig eine Regel schaffen, die width bei float fordert. Warum aber so eine Regle schaffen? Warum gerade 2 und 3 vorgeben?

Du kannst ja gerne Deine eigenen Regeln schaffen (MSS - Molilys Style Sheet). Und dann darauf hoffen, daß es auch Browser gibt, die diese Regeln berücksichtigen werden.
Tatsache ist aber, daß derzeit dann doch eher CSS in den Browsern implementiert ist - also muß man sich wohl oder übel und mehr oder weniger an die CSS-Regeln halten.

cu,
Andreas

[molily]

Hallo,

Du kannst ja gerne Deine eigenen Regeln schaffen (MSS - Molilys Style Sheet).

Es geht um einen real existierenden De-facto-Standard, nicht um »eigene Regeln«, die sich ein einzelner, unbedeutender Webautor ausgedacht hat und die weder mit dem De-facto-Standard, noch mit dem theoretischen Standard übereinstimmen. Der De-facto-Standard bildet sich dadurch, dass alle namhaften Browser im fraglichen Punkt unisono ein bestimmtes Verhalten an den Tag legen, dass der Theorie des CSS-Standards (wahrscheinlich bewusst) widerspricht.

Tatsache ist aber, daß derzeit dann doch eher CSS in den Browsern implementiert ist - also muß man sich wohl oder übel und mehr oder weniger an die CSS-Regeln halten.

Hier geht es doch gerade darum, dass es keinen Browser zu geben scheint, der die CSS-Regeln im fraglichen Punkt umsetzt. Und es gibt gute Gründe, warum sie dies nicht tun, nicht nur zwecks Fehlerkorrektur. Der fragliche Teil der CSS-Regeln ist eben *nicht* in den Browsern implementiert und der Schluss, dass man sich daran halten muss, ist praktisch im Hier und Jetzt und vermutlich in naher Zukunft schwer zu rechtfertigen. Nun lässt sich zurecht einwenden, dass der Schluss unter diesen Bedingungen auch nicht rechtfertigt werden muss und es vor allem um langfristige Tauglichkeit geht. Funktionalität im Hier und Jetzt alleine wäre im Allgemeinen ohne Zweifel kein hinreichender Grund, nicht zukunftssicheres CSS zu schreiben.
Der konkrete Grund ist eben, dass mit float ohne width flexiblere Layouts realisiert werden können, bei denen sich die Raumverteilung nach der Breite des Inhalts des floatenden Elements richtet. Wenn diese Möglichkeit nicht bestünde, weil der Standard es nicht erlaubt, wäre eine Layouttabelle nötig. Das wäre m.M.n. ein Rückschritt.

Mathias

[Detlef G.]

Hallo Siechfred

Stellt sich mir die Frage, wie eine korrekte Darstellung bei fehlender Breitenangabe aussieht. Die Browser, die mir hier zum Testen zur Verfügung stehen (Mozilla 1.4, Mozilla 1.5, Opera 7.22 und IE 6.0 und sogar der NN 4.78) stellen die zwei Container jedenfalls nebeneinander dar. Auf der von dir verlinkten Seite versagen meine Englischkenntnisse allerdings auf der Suche nach einer Antwort :-) Und nebenbei erschließt sich mir die Notwendigkeit einer Breitenangabe nicht so recht.

Dann teste das doch einmal aus, indem du den Divs einen Border gibst und das ganze dann mit mehr oder weniger Text, in verschiedenen Browsern, unterschiedliche Fenster- und Textgrößen probierst. Verlässliche, in den verschiedenen Browsern identische bzw. ähnliche Ergebnisse erhältst du nur, wenn bei floatenden Divs eine Breite angegeben ist oder das rechte Div einen linken Margin erhält.
http://d-graff.de/demos/selfhtml/float_left_test.html

Noch unvorhersehbarer wird die Darstellung (auch Überlappungen treten auf), wenn float:right dabei ins Spiel kommt.

MFG
Detlef

[Peter M]

wie kann ich zwei div's nebeneinander bringen?

<table>
 <tr>
  <td> <div>div1</div> </td> <td> <div>div2</div> </td>
 </tr>
</table>