2 DIVs nebeneinander - 50% width

Computer: Software & Programmierung HTML & CSS
#1

Hi!

Ich brauch mal wieder eure Hilfe.
Zum besseren Verständnis habe ich mal eine Grafik erstellt:
http://www.steiger4.de/templates/steiger4/images/stu…

Diese Grafik stellt im Groben meine Homepage dar. Der rot gerahmte Kasten ist mein Inhaltsbereich.
Die blauen Kästen haben eine Breite von 100% und passen sich somit der Fensterbreite des Browsers an. Das klappt wunderbar.

Die beiden grünen Kästen sollen jeweils 50% breit sein und sich ebenfalls der Fensterbreite anpassen. Das Problem ist nur, dass sie nicht direkt nebeneinander liegen sollen sondern ein margin von 10px dazwischen sein sollte.

Allerdings wären/sind diese zusätzlich angegebenen 10px plus die beiden 50% DIVs schon mehr als 100% , was dazu führt, dass der rechte grüne Kasten nicht mehr neben dem linken ist, sondern unten drunter geschoben wird.

Ich hoffe, ihr wisst, was gemeint ist und könnt mir helfen.

Danke und mit freundlichem Gruß
Christoph

#2

Hallo C-Jay,

du koenntest z.B. statt margin auch padding (sprich statt Aussenabstand Innenabstand) verwenden.

Gruss
Stefan

#3

Hallo!

Die blauen Kästen haben eine Breite von 100% und
passen sich somit der Fensterbreite des Browsers an.
Das klappt wunderbar.

Nein. Das kann nicht sein. Wenn die blauen Kästen width:100% gesetzt bekommen, bedeutet das, dass sie 100% der Breite des Elternelements, also des rotgerahmten Elements einnehmen. Dass die Fensterbreite des Browsers sowieso irrelevant ist, ist klar, aber die blauen weiten sich auch nicht auf die Breite des Viewports aus.

Die beiden grünen Kästen sollen jeweils 50%
breit sein und sich ebenfalls der Fensterbreite anpassen.

Der Fensterbreite passt sich kein Element an, immer nur dem Viewport. CSS kennt nicht die Breite des Fensters, und auch nicht die Größe der Auflösung oder des Bildschirms.

Das
Problem ist nur, dass sie nicht direkt nebeneinander liegen
sollen sondern ein margin von 10px dazwischen sein
sollte.

Naja, dann setz Deinen Abstand dazwischen.

Allerdings wären/sind diese zusätzlich angegebenen 10px plus
die beiden 50% DIVs schon mehr als 100%

Richtig. Das ist leicht gerechnet :smile:
Also musst Du die Breite der Elemente reduzieren.

was dazu
führt, dass der rechte grüne Kasten nicht mehr neben dem
linken ist, sondern unten drunter geschoben wird.

Auch das ist klar. Wenn ein Element nicht mehr daneben passt, rutscht es in die nächste Zeile.

Ich hoffe, ihr wisst, was gemeint ist und könnt mir helfen.

Ich verstehe alles, was Du sagst, aber ich kann leider nirgends finden, was daran Dein Problem ist. Was genau passiert, scheinst Du ja verstanden zu haben, denn Du beschreibst es ja richtig.

Aber was ist denn nun das Problem?

Gruß,
-Efchen

#4

Moin,

ob margin oder padding ist in diesem Fall egal, beides verbreitert das Element gemäß CSS Box Model.

Die Breite eines Elements errechnet sich wie folgt:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Gruß,
-Efchen

#5

Nein. Das kann nicht sein.

Ist aber (zumindest im IE, Firefox und Opera) so! :wink:

Aber was ist denn nun das Problem?

Das Problem ist, dass ich nicht weiß, wie ich das ganze lösen kann…

die beiden 50% DIVs sollen, wie der 100% DIV in der Breite mitgehen.
-> Das Fenster wird zB 100 px größer gezogen
-> der 100% DIV wird um 100px größer
-> die beiden 50% DIVS SOLLEN jeweils um 50 px größer werden

der 3. Punkt funktioniert jedoch nicht so wie gewünscht

#6

Nein. Das kann nicht sein.

Ist aber (zumindest im IE, Firefox und Opera) so! :wink:

Zumindest im Firefox ist das definitiv nicht so. Die EInheit „%“ in CSS bezieht sich immer auf die Größe des Elternelements, nur bei ist das der Viewport.

Aber was ist denn nun das Problem?

Das Problem ist, dass ich nicht weiß, wie ich das ganze lösen
kann…

Indem Du, wie schon gesagt, die Größe der Elemente neu berechnest, weil sich die lt. CSS Box Model aus margin+border+padding+width/height berechnet, und margin+border+padding NICHT Teil von width sind.

Das einzige, was nicht geht, ist „%“ und „px“ zu mischen. Sowas wie „100% - 10px“ geht nicht.

die beiden 50% DIVs sollen, wie der 100% DIV in der Breite
mitgehen.
-> Das Fenster wird zB 100 px größer gezogen
-> der 100% DIV wird um 100px größer
-> die beiden 50% DIVS SOLLEN jeweils um 50 px größer werden

der 3. Punkt funktioniert jedoch nicht so wie gewünscht

Der funktioniert nicht, weil Du nen margin in px angegeben hast. Gib ihn stattdessen in % ein und berechne die Größe entsprechend neu.

#7

Zumindest im Firefox ist das definitiv nicht so

Der rote Kasten ist übrigens auch 100% - es funktioniert also DEFINITIV - vielleicht hast du ja nur nicht verstanden, was ich meine. Dass es funktioniert, davon kannst du dich auch gern überzeugen - meine Gästebuch Seite ist ähnlich aufgebaut.

…weil sich die lt. CSS Box Model aus
margin+border+padding+width/height berechnet, und
margin+border+padding NICHT Teil von width sind.

Ja, is klar - das wusste ich bereits :wink:

Der funktioniert nicht, weil Du nen margin in px angegeben
hast. Gib ihn stattdessen in % ein und berechne die Größe
entsprechend neu.

Der Punkt ist ja, dass der Abstand zwischen diesen beiden 50% DIVs fest sein soll (10px). Eine Angabe in Prozent würde selbstverständlich funktionieren, aber nicht den gewünschten Effekt hervorrufen.

#8

Leider sind es, wie Efchen schon korrekt geschrieben hat, sowohl bei margin als auch bei padding x Pixel zu viel.
Das scheidet also leider aus.
Trotzdem Danke für die Antwort!

#9

Der rote Kasten ist übrigens auch 100% - es funktioniert also
DEFINITIV

Ich vermute, dass Du irgendwas anders machst, als ich das erwarte.

Der Punkt ist ja, dass der Abstand zwischen diesen beiden 50%
DIVs fest sein soll (10px). Eine Angabe in Prozent würde
selbstverständlich funktionieren, aber nicht den gewünschten
Effekt hervorrufen.

Dann kann der gewünschte Effekt nicht umgesetzt werden.

#10

Hallo Christoph,

Die beiden grünen Kästen sollen jeweils 50%
breit sein und sich ebenfalls der Fensterbreite anpassen. Das
Problem ist nur, dass sie nicht direkt nebeneinander liegen
sollen sondern ein margin von 10px dazwischen sein
sollte.

ich nehme an, es geht Dir nur um den optischen Effekt. Müsste es dann nicht, um das gewünschte Ergebnis zu erreichen, ausreichen, dem Inhalt der beiden Kästen jeweils einen Links- bzw. Rechtsabstand von jeweils 5px zu geben?
Alternativ könntest Du auch Boxen verschachteln: Zwei nebeneinander stehende Boxen mit einer Breite von jeweils 50% enthalten jeweils eine Box ohne ausdrücklich definierte Breite mit einem Links- bzw. Rechtsabstand von 5px. Diese enthalten dann den Inhalt.

Grüße
Yasmin

#11

Hallo Yasmin!

Ich bin mir grad nicht sicher, ob ich das schon versucht habe, aber ich werde es mal tun :smile:
Danke dir! Rückmeldung folgt…

Christoph

#12

Mir kam grad noch folgende Idee:
die beiden Container bekommen jew. float: left/right und 49% Breite.
Nachteil: die Breite nimmt mit groesser werdendem Browserfenster zu.

Gruss
Stefan

1 Like
#13

Hm… Das werde ich vielleicht auch mal versuchen, aber dann habe ich doch wahrscheinlich auch nicht den Effekt, dass der Abstand zwischen beiden immer gleich ist, oder verstehe ich das falsch?
Dass die Breite bei breiter werdendem Browserfenster zunimmt ist ja erwünscht! Vielleicht habe ich mich in der Frage ein bisschen unklar ausgedrückt.

Ich werde mal noch ein bisschen rum basteln und meine Ergebnisse posten, sofern sie erfolgreich sind :smile:

Danke
Gruß Christoph