Vierspaltiges Layout - Abstände

[AzRaIL]

Nabend,

habe ein vierspaltiges Layout das ich gestalten will. Demnach also vier Bereiche mit jeweils 25% Breite.
Zwischen den vier Bereichen soll jeweils 40px Abstand sein. Jedoch soll der erste und letzte Bereich kein padding-left bzw. padding-right haben. Also insgesamt nur 120px Abstand.

Hier mal in jsfiddle zur besseren Veranschaulichung:

http://jsfiddle.net/w99Lq/

Wie kann ich das Bewerkstelligen sodass die vier Bereiche gleich groß bleiben und die Abstände 40px sind?
Hab das Gefühl ich hab da irgendwo einen Denkfehler, weil an sich ist das doch kein schwieriges Problem!?

lg

 

[MrMurphy]

Hallo

Hab das Gefühl ich hab da irgendwo einen Denkfehler, weil an sich ist das doch kein schwieriges Problem!?

Stimmt.

Zunächst sollte man nicht verschiedene Einheiten wie px und % mischen. In Zeiten flexibler Layouts mit Responsive Design sind am ehesten % angebracht.

Und dann sollte die gesamte Breite nicht mehr als 100% betragen. Die sind aber bereits mit den 4 mal 25% erreicht.

Gruss

MrMurphy

 

[AzRaIL]

Und dann sollte die gesamte Breite nicht mehr als 100% betragen. Die sind aber bereits mit den 4 mal 25% erreicht.

Deshalb auch border-box damit das padding nicht draufgerechnet wird.
An sich würde es gehen wenn ich die einzelnen Bereiche stylen würde anstatt alle zusammen

http://jsfiddle.net/w99Lq/1/

Hatte aber gehofft dass es da ne "Universallösung" gäbe.
EDIT: Wäre es nicht möglich mit display:flex; und justify-content:space-between; das ganze zu erstellen? Hab es versucht, ging aber irgendwie nicht...

gruß

 

[Tronjer]

Warum nicht calc(25% - 40px)?

 

[MrMurphy]

Hallo,

stimmt, da hatte ich falsch gelesen.

Abstände zwischen Blockelementen werden nicht mit padding sondern mit margin bestimmt. Deshalb hatte ich das sachlich falsche padding gar nicht registriert.

Du kannst zum Beispiel den div eine Breite von 22% geben. margin-right wäre dann 4%, außer beim letzten, das margin-right 0 erhält. Das würde dann so aussehen:

http://foreninfo.bplaced.net/seiten_fremdseiten/2014_05_03_azrall_02_abstand.html

Gruss

MrMurphy

 

[AzRaIL]

Warum nicht calc(25% - 40px)?

Ja das ist ne gute Idee. Jedoch würde es dann von der Breite her nicht ganz aufgehen: http://jsfiddle.net/w99Lq/2/

Abstände zwischen Blockelementen werden nicht mit padding sondern mit margin bestimmt. Deshalb hatte ich das sachlich falsche padding gar nicht registriert.

Ja stimmt, will es eigtl. auch mit margin machen aber da komm ich dann zu dem Problem dass ich den Bereichen nicht 25% Breite geben kann sondern halt zb. 22% und einen bestimmten margin.
Aber auch hier verstehe ich nicht ganz wie sich das berechnet. Weil 22% + 4% sind mehr als 25% und theoretisch würde man dann doch auch 100% Breite überschreiten?

 

[djheke]

So Vielleicht
http://www.gipspferd.de/forumhilfe/vier-spalten/

Die vielen Rahmen/Hintergrundfarben und so kannst du natürlich rausnehmen. Ist nur zur Veranschaulichung.

 

[Tronjer]

Weitere Möglichkeit wäre der Einsatz eines Frameworks mit Grid Layout.

 

[MrMurphy]

Hallo

Aber auch hier verstehe ich nicht ganz wie sich das berechnet. Weil 22% + 4% sind mehr als 25% und theoretisch würde man dann doch auch 100% Breite überschreiten?

Nicht nach meiner Rechnung:

22 + 4 + 22 + 4 + 22 + 4 + 22 = 100

Das hat zudem den Vorteil, das keine anderen "Spieleren" notwendig sind.

Gruss

MrMurphy