2 contianer

[heinetz]

Hallo Forum,

ich möchte 2 Ccontainer mit der selben Breite von 50% nebeneinander positionieren. Das funktioniert ja ohne Probleme mit:

.contianer_half{
 width:50%;
 float:left;
}

Jetzt sollen die beiden sollen aber einen festen Abstand von 10px zueinander haben:

.contianer_half{
 width:50%;
 float:left;
 margin: 0 5px;
}

... und schon sind sie nicht mehr nebeneinander. Irgendwie logisch, denn wenn 50%+5px+5px sind eben doch etwas mehr als die Hälfte. Ist diese Kombination aus width:50% und margin:10px irgendwie zu realisieren oder bedarf es fester Grössenangaben?

danke für Tipps und

beste gruesse,
heinetz

[Matthias Apsel]

Om nah hoo pez nyeetz, heinetz!

... und schon sind sie nicht mehr nebeneinander. Irgendwie logisch, denn wenn 50%+5px+5px sind eben doch etwas mehr als die Hälfte. Ist diese Kombination aus width:50% und margin:10px irgendwie zu realisieren oder bedarf es fester Grössenangaben?

für moderne Browser gibt es calc(). Für alte Browser würde ich den Abstand prozentual festlegen. Das könnte auch eine allgemein gültige Lösung sein.

Matthias

[molily]

Moin,

Eine weitere Möglichkeit:

width: 50%;
box-sizing: border-box;

Linke Box:
padding-right: 5px;

Rechte Box:
padding-left: 5px;

Grüße,
Mathias

[heinetz]

Moin,

Eine weitere Möglichkeit:

width: 50%;
box-sizing: border-box;

Linke Box:
padding-right: 5px;

Rechte Box:
padding-left: 5px;

Grüße,
Mathias

Danke für die border-box, die hatte ich tatsächlich nicht gekannt. Aber ich hatte mich tatsächlich nur gefragt, ob das mit oldschool-mitteln machbar ist und ich nur grad a.d. Schlauch steh. Meine Boxen haben eine feste Breite und die 50% lassen sich ohne Weiteres in Pixeln ausdrücken.

gruss,
heinetz

[Gunnar Bittersmann]

@@heinetz:

nuqneH

Danke für die border-box, die hatte ich tatsächlich nicht gekannt. Aber ich hatte mich tatsächlich nur gefragt, ob das mit oldschool-mitteln machbar ist

border-box IST old-school.

und ich nur grad a.d. Schlauch steh. Meine Boxen haben eine feste Breite und die 50% lassen sich ohne Weiteres in Pixeln ausdrücken.

Feste Breiten in Pixel sind nicht old-school, sondern out.

(min-width/max-width in em kann durchaus sinnvoll sein.)

Außerdem verstehe ich dein Problem mit Division und Subtraktion nicht.

Qapla'

[Gunther]

Moin,

Danke für die border-box, die hatte ich tatsächlich nicht gekannt. Aber ich hatte mich tatsächlich nur gefragt, ob das mit oldschool-mitteln machbar ist und ich nur grad a.d. Schlauch steh. Meine Boxen haben eine feste Breite und die 50% lassen sich ohne Weiteres in Pixeln ausdrücken.

Also wenn sich bei dir die 50% auch in absoluten Pixeln ausdrücken lassen, dann arbeitest du mit auf deiner Seite mit einer festen Auflösung. Was davon heutzutage zu halten ist, hat Gunnar ja schon zum Ausdruck gebracht.

Mathias Vorschlag bezüglich calc() ist imho "mit Vorsicht" zu genießen, da gerade im Mobile Bereich die Unterstützung für calc() ausgesprochen "dürftig" ist. Insbesondere bei den Millionen Android Systemen, welche erst seit der allerneusten Version 4.4 calc() unterstützen.

Der Vollständigkeit halber sei noch (wie so oft) auf die Option mit display:table und border-spacing hingewiesen. Hierbei kann/muss man ggf. mit negativen Margins arbeiten, wenn man links und rechts außen keinen entsprechenden Abstand haben möchte.

Gruß Gunther