borderbreite in px bei %-containern - wie rausrechnen?

[daniel]

hallo alle zusammen,

ich habe ein kleines css-problem.

angenommen, ich habe ein einfaches 2spaltiges layout. eine spalte mit 30% Breite und float:left, die andere mit 70% Breite und float:right positioniert. Jetzt stehen beide Spalten schön nebeneinander.

Jetzt verpasse ich der linken Spalte eine Border von einem Pixel und schon ist die Breite 30% PLUS einem Pixel -> 70% Breite für die linke Spalte ist zu breit, die Spalte rutscht "unter" die andere, beide können nicht mehr nebeneinander stehen ohne abstand.

man müßte also sowas wie "30% Breite MINUS einem Pixel" angeben können, damit das passt. "width:30%-1px" entspringt aber wohl meiner fantasie ;-) und die rechte spalte dann einfach statt auf 70% bspw. nur auf 68% zu trimmen, finde ich irgendwie nicht "sauber".

gibts zu diesem problem irgendeine lösung, workaround oder sonstwas?

vielen dank für hilfe und tipps, grüße, daniel

[Mathias Bigge]

Hi daniel,

Jetzt verpasse ich der linken Spalte eine Border von einem Pixel und schon ist die Breite 30% PLUS einem Pixel -> 70% Breite für die linke Spalte ist zu breit, die Spalte rutscht "unter" die andere, beide können nicht mehr nebeneinander stehen ohne abstand.
man müßte also sowas wie "30% Breite MINUS einem Pixel" angeben können, damit das passt. "width:30%-1px" entspringt aber wohl meiner fantasie ;-)

Natürlich gäbe es Lösungsmöglichkeiten mit JS, aber ich denke, dass wäre Dir ebenso unsympathisch wie mir. Wäre es nicht das Einfachste in diesem Falle mit padding statt mit Border zu arbeiten?

Viele Grüße
Mathias Bigge

[wahsaga]

hi,

gibts zu diesem problem irgendeine lösung, workaround oder sonstwas?

beste lösung: von der vorstellung pixelgenauen designs verabschieden, da es sowieso nie 100%ig klappen wird. warum also nicht einfach einen kleine abstand zwischen den elementen erlauben - ein 68% und ein 30% breit machen o.ä.

workaround:
zwei elemente verschachteln, dass äussere (z.b. div) bestimmt nur die breite, und da hinein kommt dann das zweite (block level element), dass sich über die komplette breite ersteckt, und den rahmen definiert bekommt.

gruss,
wahsaga

[Ingo Turski]

Hi,

die andere mit 70% Breite und float:right positioniert.

genau hier kannst Du ansetzen. Dieses Element benötigt, wenn es im Quelltext nach dem links-floatenden kommt, kein float und damit auch keine Breite. Wenn Du das wegläßt und durch margin-left:31% oder mehr (je nach Abstand) ersetzt, nimmt es sich automatisch den restlichen Platz.
HTML kann so flexibel sein, wenn man es nur zuläßt...

freundliche Grüße
Ingo