Hallo,

ich möchte zwei divs erstellen, die direkt aneinander angrenzen. Diese sollen jeweils komplett von einem box-shadow umrundet sein, allerdings soll dieser nicht auf der jeweils anderen div angezeigt werden (also der Schatten beider divs soll hinter der jeweils anderen liegen). Nun ist meine Frage, ob das überhaupt richtig zu bewerkstelligen ist (z.B. Variationen mit z-index) - und wenn ja wie, oder nicht?

Hier ein Beispiel:

[Blockierte Grafik: http://i.imm.io/mZId.jpeg]

Wie man sieht liegt der Schatten der rechten Box über der linken. Ich möchte, dass zwischen diesen beiden Bereichen keine Abgrenzung (oder wenn dann nur durch einen border an der "Hauptbox") entsteht. Damit würde ich gleich zu einer zweiten Frage kommen. Nämlich hat die Hauptbox eine relative Breite (50% der Viewportbreite). Die Nebenbox setze ich
dann mit margin: 0 75% an, was auch in passt. Je kleiner der Viewport allerdings ist, desto weiter wird die Box in die Hauptbox geschoben. Das
sind zwar insgesamt nur einige Pixel, allerdings zerstört das dennoch das Design.

Mit freundl. Grüßen
Padarom

Der Code ist auf jsfiddle.net/3b9h5/38/
Die Schattenpositionierung wie von dir gezeigt passt ganz gut, habe ich bereits versucht mit einzubauen. Oben und unten passt der Schatten ja schon ganz gut, ist eigentlich genauso wie bei der Main- und Headbox, allerdings ist er mir rechts ein wenig zu stark. Wenn ich den ersten Parameter niedriger eingebe, dann wird der Schatten wieder über der Maindiv angezeigt.

Mit freundl. Grüßen
Padarom

Dann würde der Main-Div aber einen Schatten auf das Loginfeld werfen. Genau das möchte ich ja umgehen.