DIVs ohne Abstand nebeneinander und gleich hoch

[Stefan]

Hallo nochmal!

Ich habe mein Tabellen-Layout nun verworfen und versuche es mit CSS. Nun habe ich folgendes Problem: Ich möchte zwei DIVs ohne Abstand nebeneinander positionieren:

.layoutbox {
  padding:0px;
  margin:0px;
}

<div class="layoutbox" style="width:790;">
  <div class="layoutbox" style="width:395px;float:right;">[...]</div>
  <div class="layoutbox" style="width:395px;">[...]</div>
</div>

Im IE werden die beiden inneren DIVs aber nicht nebeneinander, sondern untereinander angezeigt.

Verringere ich die Breite der DIVs etwas, dann sitzen sie nebeneinander. Mal davon abgesehen, dass das für mich leider keine Lösung ist, habe ich dann gleich das nächste Problem: Ich möchte, dass die beiden DIVs immer gleich hoch sind. Setze ich nun height:100%; für beide DIVs, so haben sie beide die Höhe des Browserfensters, nicht die Höhe des umgebenden Rahmens.

Dafür gibt es doch bestimmt eine Lösung? Anzusehen unter:
http://test.schwachsinn-online.de/css.html

Viele Grüße,
Stefan

[Ingo Turski]

Hi,

.layoutbox {
  padding:0px;
  margin:0px;
}

das ist völlig überflüssig.

Im IE werden die beiden inneren DIVs aber nicht nebeneinander, sondern untereinander angezeigt.

Das dürfte am 3-Pixel-Bug bei floatenden Elementen liegen. Lasse beide DIVS floaten.

Ich möchte, dass die beiden DIVs immer gleich hoch sind. Setze ich nun height:100%; für beide DIVs, so haben sie beide die Höhe des Browserfensters, nicht die Höhe des umgebenden Rahmens.

Dafür gibt es doch bestimmt eine Lösung?

Ja: eine Tabelle. Dein Wunsch beschreibt exakt eine Tabelleneigenschaft und keine Eigenschaft zweier nebenstehenden CSS-Boxen.

freundliche Grüße
Ingo

[Stefan]

Dafür gibt es doch bestimmt eine Lösung?
Ja: eine Tabelle. Dein Wunsch beschreibt exakt eine Tabelleneigenschaft und keine Eigenschaft zweier nebenstehenden CSS-Boxen.

Das war auch mein erster Gedanke. Man wollte mich jedoch eines besseren belehren, siehe mein Thread von vorhin ab hier:
https://forum.selfhtml.org/?t=112133&m=707805

Viele Grüße,
Stefan

[Ingo Turski]

Hi,

Ja: eine Tabelle. Dein Wunsch beschreibt exakt eine Tabelleneigenschaft und keine Eigenschaft zweier nebenstehenden CSS-Boxen.

Das war auch mein erster Gedanke. Man wollte mich jedoch eines besseren belehren

Du hast drei Möglichkeiten:
1. Du stehst zu Deinem Tabellenlayout und verwendest Tabellen.
2. Du vergißt Tabellen-Aussehen und entwickelst ein praktikableres CSS-Layout.
3. Du erweckst lediglich den Anschein gleicher Höhen, wie z.B. dieses Beispiel demonstriert: http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm

freundliche Grüße
Ingo

[Ashura]

Hallo Stefan.

Im IE werden die beiden inneren DIVs aber nicht nebeneinander, sondern untereinander angezeigt.

Klar, Blockelemente nehmen von Haus aus den maximalen Platz ein.

Verringere ich die Breite der DIVs etwas, dann sitzen sie nebeneinander. Mal davon abgesehen, dass das für mich leider keine Lösung ist,

Ich dachte, du WILLST sie nebeneinander haben? Dies ist nur möglich, wenn du  ihnen eine Breite verpasst oder sie floaten lässt.

habe ich dann gleich das nächste Problem: Ich möchte, dass die beiden DIVs immer gleich hoch sind.

Also in Abhängigkeit zueinander?

Wenn ja: dies ist (ohne zusätzliche Skripthilfen) nur in Tabellen möglich. (Nein, dies ist kein Aufruf, zum Tabellenlayout zurückzukehren.

Wenn nein: bitte genauer formulieren.

Setze ich nun height:100%; für beide DIVs, so haben sie beide die Höhe des Browserfensters, nicht die Höhe des umgebenden Rahmens.

Meinst du nicht eher den Viewport?

Dafür gibt es doch bestimmt eine Lösung? Anzusehen unter:
http://test.schwachsinn-online.de/css.html

[ ] Du hast dir diese Seite auch einmal in FF und Opera angeschaut

[x] Du denkst noch immer in Tabellen

[x] Du hast eine Vorliebe für Div-Suppen.

Wie es geht, kannst du dir im entsprechenden Kapitel in SelfHTML anschauen.

Einen schönen Dienstag noch.

Gruß, Ashura

[Tim]

Hi,

[x] Du denkst noch immer in Tabellen

So gehts mir auch noch. xD

Was ich suche wäre eine Anleitung die einem divs mal richtig einfach erklärt. SELFHTML meine ich damit nicht.

Tim

[Ashura]

Hallo Tim.

Was ich suche wäre eine Anleitung die einem divs mal richtig einfach erklärt. SELFHTML meine ich damit nicht.

Warum nicht? In welchem Punkt verstehst du SelfHTML nicht?
Die Bedeutung und Anwendung ist meiner Meinung nach gut erklärt.

Einen schönen Dienstag noch.

Gruß, Ashura

[Der Martin]

Hallo Ashura,

sitzt du heute etwas auf der Leitung? Du bist doch sonst so ein scharfer Beobachter und findest auch aus dem Kauderwelsch oft noch heraus, was der Poster meint?  ;)
    (Nein, Stefan, damit will ich nicht sagen, dass du unverständlich geschrieben hast!)

Im IE werden die beiden inneren DIVs aber nicht nebeneinander, sondern untereinander angezeigt.
Klar, Blockelemente nehmen von Haus aus den maximalen Platz ein.

Nein, Stefan hatte ihnen "rock hard" Breitenangaben verpasst. Aufs Pixel genau. Ohne Helm und ohne Gurt... ähm, ich meine, ohne margin und padding.

Verringere ich die Breite der DIVs etwas, dann sitzen sie nebeneinander. Mal davon abgesehen, dass das für mich leider keine Lösung ist,
Ich dachte, du WILLST sie nebeneinander haben?

Ja eben! Und das Verringern der Breite ist für ihn keine Lösung!

Dies ist nur möglich, wenn du  ihnen eine Breite verpasst ...

Und style="width:395px;" genügt dir nicht als Breite? Mal abgesehen davon, dass beim äußeren DIV die Breite keine Einheit hat. Ein gnädiger IE wird stillschweigend von px ausgehen, aber darauf sollte man sich nicht verlassen.

oder sie floaten lässt.

Das macht er mit dem rechten DIV (warum eigentlich nicht mit beiden?).

habe ich dann gleich das nächste Problem: Ich möchte, dass die beiden DIVs immer gleich hoch sind.
Also in Abhängigkeit zueinander?

Ja. Den linken so hoch wie den rechten.
Okay, "immer gleich hoch" könnte auch heißen, sie sollen immer eine konstante Höhe haben. Aber das war hier vermutlich nicht gemeint.

Wenn ja: dies ist (ohne zusätzliche Skripthilfen) nur in Tabellen möglich. (Nein, dies ist kein Aufruf, zum Tabellenlayout zurückzukehren.

Wenn Stefan von seinen Zielvostellungen nicht abrücken möchte - okay, warum nicht. Besser wäre allerdings, er würde sich über das Layout nochmal Gedanken machen und eine tabellenfreie Lösung finden.

Setze ich nun height:100%; für beide DIVs, so haben sie beide die Höhe des Browserfensters, nicht die Höhe des umgebenden Rahmens.
Meinst du nicht eher den Viewport?

Natürlich. Das würde ich jedenfalls meinen, wenn ich "Browserfenster" sage. Das Framework außenrum (Rahmen, Symbolleisten, Sidebars, etc.) geht den Webdesigner schließlich nix an.

Aber hoppla: Beide DIVs nehmen die Höhe des Browserfensters ein?
Ja: Der rechte, weil er mit float:right aus dem Textfluss gelöst ist; und der linke, weil er den umgebenden Container-DIV mit vergrößert. Der hat nämlich keine festgelegte Höhe und ist demzufolge flexibel, passt sich seinem Inhalt an.

[x] Du denkst noch immer in Tabellen

Offensichtlich.

[x] Du hast eine Vorliebe für Div-Suppen.

Eine sehr verbreitete Vorliebe, ja. Dabei gibt es sooo viele andere Elemente, die meistens sogar sinnvoller einzusetzen wären.

So long,

Martin

[Ashura]

Hallo Martin.

sitzt du heute etwas auf der Leitung? Du bist doch sonst so ein scharfer Beobachter und findest auch aus dem Kauderwelsch oft noch heraus, was der Poster meint?  ;)

Möglichweise. Mir schwirren andere Dinge im Kopf herum:

/me hat seine praktische Fahrprüfung bestanden. :-D

Nein, Stefan hatte ihnen "rock hard" Breitenangaben verpasst. Aufs Pixel genau. Ohne Helm und ohne Gurt... ähm, ich meine, ohne margin und padding.

Stimmt, ich verwende das style-Attribut so selten, dass ich es hier versäumt habe, darauf zu achten.

Ich dachte, du WILLST sie nebeneinander haben?

Ja eben! Und das Verringern der Breite ist für ihn keine Lösung!

Und was willst DU mir damit sagen? :-?

Und style="width:395px;" genügt dir nicht als Breite? Mal abgesehen davon, dass beim äußeren DIV die Breite keine Einheit hat. Ein gnädiger IE wird stillschweigend von px ausgehen, aber darauf sollte man sich nicht verlassen.

Ich sagte ja: übersehen...

Also in Abhängigkeit zueinander?

Ja. Den linken so hoch wie den rechten.

Deine Glaskugel scheint besser zu funktionieren.
Meinst du, dass ich einmal ein Update einfahren sollte?

Wenn Stefan von seinen Zielvostellungen nicht abrücken möchte - okay, warum nicht. Besser wäre allerdings, er würde sich über das Layout nochmal Gedanken machen und eine tabellenfreie Lösung finden.

ACK.

Natürlich. Das würde ich jedenfalls meinen, wenn ich "Browserfenster" sage. Das Framework außenrum (Rahmen, Symbolleisten, Sidebars, etc.) geht den Webdesigner schließlich nix an.

Wir beide wissen, dass dies allzu oft nicht beachtet wird.

[x] Du hast eine Vorliebe für Div-Suppen.
Eine sehr verbreitete Vorliebe, ja. Dabei gibt es sooo viele andere Elemente, die meistens sogar sinnvoller einzusetzen wären.

Siehe wahsaga's Beitrag. :-)

Einen schönen Dienstag noch.

Gruß, Ashura

[Der Martin]

n'Abend...

Möglichweise. Mir schwirren andere Dinge im Kopf herum:
/me hat seine praktische Fahrprüfung bestanden. :-D

Hey, congratulations!
Dann denke bitte daran, was mein Fahrlehrer mir damals gesagt hat, als ich stolz den "Lappen" (damals rosa, ganz neu eingeführt) in der Hand hielt:
"Wenn du jetzt den Führerschein hast, heißt das noch lange nicht, dass du nun fahren _kannst_. Es bedeutet nur, dass du ab jetzt in freier Wildbahn üben darfst."

Stimmt, ich verwende das style-Attribut so selten, dass ich es hier versäumt habe, darauf zu achten.

Tja, ist ja auch nicht unbedingt die empfohlene Stelle, um CSS-Angaben zu machen.

Ja eben! Und das Verringern der Breite ist für ihn keine Lösung!
Und was willst DU mir damit sagen? :-?

Ich hatte deinen Einwand so gedeutet: Du hast die ursprüngliche Beschreibung so verstanden, als hätte Stefan die Blöcke untereinander haben wollen und beklagt sich, dass sie nun nebeneinander rutschen, wenn er ihre Breite reduziert: "Aber das wolltest du doch so."

Ja. Den linken so hoch wie den rechten.
Deine Glaskugel scheint besser zu funktionieren.

Ich habe sie heute morgen geputzt. *g*

Meinst du, dass ich einmal ein Update einfahren sollte?

Hmm. Ein Versuch schadet nie. Wo kriegt man das?

[x] Du hast eine Vorliebe für Div-Suppen.
Eine sehr verbreitete Vorliebe, ja. Dabei gibt es sooo viele andere Elemente, die meistens sogar sinnvoller einzusetzen wären.

Siehe wahsaga's Beitrag. :-)

YMMD, wahsaga!
Den hatte ich noch gar nicht gesehen. Ja, sehr schön plakatiert. :)

Mast- und Schotbruch - oder was sagt man bei den Autofahrern?

Martin

[Ashura]

Hallo Martin.

/me hat seine praktische Fahrprüfung bestanden. :-D

Hey, congratulations!

Danke. :-)

Dann denke bitte daran, was mein Fahrlehrer mir damals gesagt hat, als ich stolz den "Lappen" (damals rosa, ganz neu eingeführt) in der Hand hielt:
"Wenn du jetzt den Führerschein hast, heißt das noch lange nicht, dass du nun fahren _kannst_. Es bedeutet nur, dass du ab jetzt in freier Wildbahn üben darfst."

Hehe... Lass' das bloß nicht die Fußgänger hören. ;-)

Ja eben! Und das Verringern der Breite ist für ihn keine Lösung!
Und was willst DU mir damit sagen? :-?

Ich hatte deinen Einwand so gedeutet: Du hast die ursprüngliche Beschreibung so verstanden, als hätte Stefan die Blöcke untereinander haben wollen und beklagt sich, dass sie nun nebeneinander rutschen, wenn er ihre Breite reduziert: "Aber das wolltest du doch so."

Nö, so hatte ich das nicht verstanden:

Ich möchte zwei DIVs ohne Abstand nebeneinander positionieren:

Dies kann man nur schwer missverstehen.

Deine Glaskugel scheint besser zu funktionieren.

Ich habe sie heute morgen geputzt. *g*

Ach, mit dem Saubermachen habe ich es nicht so.

Meinst du, dass ich einmal ein Update einfahren sollte?

Hmm. Ein Versuch schadet nie. Wo kriegt man das?

Hm... Gute Frage. Vielleicht sind deswegen viele (alle?) Glaskugeln veraltet?

Siehe wahsaga's Beitrag. :-)

YMMD, wahsaga!
Den hatte ich noch gar nicht gesehen. Ja, sehr schön plakatiert. :)

Mast- und Schotbruch - oder was sagt man bei den Autofahrern?

Hals- und Beinbruch? (Bitte nicht.)

Einen schönen Dienstag noch.

Gruß, Ashura