50/50 Layout

[matuweb]

Hallo,

ich stehe gerade ein wenig aufm Schlauch...

Wie bekomme ich folgendes Layout hin?

layout5050.jpg

Jeder Seite soll 50% des Browsers ausmachen und der Inhalt soll mittig auf 960 px stehen.
Dazu responsive, bei 320px sollen beide Blöcke untereinander stehen.

Habt ihr ne Lösung für mich?

[Kahmoon]

Gehen 2 Artikel mit jeweils grid6 nicht?

Edit:
Ach du meinst außerhalb von den 960px. Sorry...verlesen.

[matuweb]

Probiere ich gleich aus.

Es soll auf jeden fall für jede Seite eine Hintergrundfarbe geben.
Und diese soll den ganzen 50% Bereich ausfüllen (genau wie im Beispiel).

[matuweb]

Ich habe zwei Artikel angelegt und floate den einen.
Jetzt geht die Hintergrundfarbe immer nur so weit, wie Content in dem Bereich ist...
Die Farbe soll aber bis ans Browserende gehen.

[Bas]

Ich würde das Template anpassen ...

<div style="width:50%; float:left; background:red;min-height:100%;">
 <div style="float:right; width:480px;">contentausgabe</div>
</div>
<div style="width:50%; float:right; background:green;min-height:100%;">
 <div style="float:left; width:480px;">contentausgabe</div>
</div>

[matuweb]

Danke, das sieht schon ganz gut aus .

Nur der Hintergrund der linken Spalte ist nur so hoch wie sein Inhalt...
Er soll aber die gesamte Browserhöhe einnehmen.
wie kann ich das noch lösen?

[mlweb]

Für diesen Effekt würde ich mir den background von body vornehmen. Eine elegante Lösung ist ein css-Verlauf mit harter Kante. Habe mal schnell ein Beispiel zusammengebaut http://test.webdesign-marenlange.de/verlauf3.html. Ist responsiv und wechselt bei 320px auf eine andere Darstellung. Dabei ist es auch möglich für den Inhalt statt der festen 960px für große Bildschirme z. B. eine Breite von 80% zu verwenden wie in meinem Beispiel.

Schöne Pfingsten

Maren

[matuweb]

Cool, Danke .

Werde es mal in Contao integrieren.

[matuweb]

Habs hinbekommen bis auf die responsive Umstellung.

Ich habe ein neues CSS angelegt und im Seitenlaout eingebunden mit den Angaben:

@media only screen and (min-width: 321px) {
#wrapper {
width: 80%;
}

Es wird aber nichts untereinander angezeigt.

Was mache ich falsch?

[InitArt]

Hast du ggf. eine Livedemo oder kannst es auf CodePen stellen? Ist immer einfacher wenn man deinen Code vor sich hat.

[mlweb]

Ein Link wäre schon sehr nett.
Damit Deine zwei Blöcke nebeneinander dastehen werden diese ja gefloatet. Da ich nicht weiss wie Du das aufgebaut hast, kann ich Dir nicht sagen welche Klassen oder IDs dafür bei Dir zuständig sind.
Dieses Floaten darf nur passieren, wenn der Bildschirm breiter als 321px ist. Das bedeutet Deine Floats müssen, wie im Beispiel innerhalb der media-query stehen damit das funktioniert. Bei mir im Beispiel ist das die Klasse "g50".

Maren

Nachtrag: Und natürlich darf auch der Verlauf im body nur bei großen Bildschirmen greifen.