[melon]

Hi,
ich habe ein Hauptcontainer und rechts daneben 3 weitere untereinenader. Diese 3 variieren je nach Inhalt in der Höhe.
Wie schaffe ich es mittels CSS, dass der Hauptcontainer mit den 3 rechts daneben unten bündig ist?
Ich habe es mit faux columns versucht, aber das scheint in meinem fall nicht zu funktionieren.

[DesignKater]

Das kannst du ganz einfach faken ohne großes überlege. Du legst einen Wrapper um den Hauptcontainer und die Sidebar und legst da eine Hintergrundgrafik fest, in deinem Beispiel in Grün und so breit wie dein Hauptcontainer und 1px hoch. Diese lässt du dann auf der y-Achse kacheln. Fertig.

[Mark-Korb]

Alternative: Warum keine Festhöhe? oder min-height?

[melon]

wenn ich es per container um alle 4 mache und css...

.wrapper {
background: url(../bilder/wrapper.png) repeat-y;
}

dann wiederholt sich die hintergrundgrafik nicht. ich stehe irgendwie auf dem schlauch. dabei ist es bestimmt einfach.

festhöhe kann ich nicht machen, denn die 3 container rechts variieren ja in der höhe je nach inhalt.

[easteregg]

Das mit dem Hintergrund könnte daran liegen, dass deine Haupt- und Seitencontainer alle floaten? Dann könnte z.B. im .wrapper ein clear: both; helfen.
Ansonsten zeig doch mal auch den Code deiner Boxen, die du wrappst.

[melon]

nee, zwar sind alle 4 container auf float (hauptcontainer left, die anderen 3 right), aber auch mit clear: both; keine änderung.

<div class="wrapper">
<div class="hauptcontainer">...</div>
<div class="rechts_1">..</div>
<div class="rechts_2">..</div>
<div class="rechts_3">..</div>
</div>

-------------------------------------------------------------

.wrapper {
background: url(../bilder/wrapper.png) repeat-y;
clear: both;
}

.hauptcontainer {
width: 580px;
background-color: #333;
display: inline;
float: left;
margin: 6px 0 0 6px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 20px 10px;
}

.rechts_1 {
width: 330px;
background-color: #333;
float: right;
margin: 6px 6px 10px 0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 15px 10px;
}

.rechts_2 {
width: 330px;
background-color: #333;
float: right;
margin: 6px 6px 10px 0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 15px 10px;
position: relative;
}

.rechts_3 {
width: 330px;
background-color: #333;
clear: right;
float: right;
margin: 6px 6px 10px 0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 15px 10px;
}

[m]

http://www.google.de/search?q=css+equal+height+columns

[melon]

danke m, aber das habe ich schon gesehen. es funktioniert einfach nicht, in keinem browser.