Go-to-Art für Sidebar + zwei Spalten Layout mit verschiedenen Höhen?

Question

Ich arbeite an einer Website mit folgendem Layout: http://i.imgur.com/EyhNL4s.png

Info;

Rot markiert ist eine (feste) Seitenleiste, die auf einem Mobile zusammenklappen/falten sollte.

Die anderen Blöcke sind nur Divs mit variablen Höhen.

Jetzt fragte ich mich, was der beste Ansatz wäre, dies zu schaffen. Ich probierte mehrere aus, beginnend mit dem Inhalt (Variable Höhe divs) in einem Wrapper, der eine Float gegeben wurde: Links zu (versucht) jQuery Masonry verwenden. Beide Wege sind bisher nicht erfolgreich. Aus irgendeinem Grund werden meine Divs nicht nebeneinander fließen.

Dies sind die Höhen der Divs, die ich benutze, basierend auf meinem Design;

#green { 
    height: 312px; 
} 

#blue { 
    height: 752px; 
} 

#orange { 
    height: 876px; 
} 

#purple { 
    height: 618px; 
} 

#yellow { 
    height: 876px; 
} 

Könnte jemand mich in die richtige Richtung schicken?

Bearbeiten; Was ich vergessen habe zu erwähnen, ist, dass wenn ich den Bildschirm kleiner mache, die Inhaltsblöcke unter einander platziert werden sollten. (Und die Seitenleiste sollte zusammenbrechen, aber ich werde später auf dieses "Problem" eingehen.)

Answer 1

Sie könnten versuchen, 2 Elternelemente zu erstellen. So etwas wie .sidebar und .content. Sie können diese dann unter Verwendung von float: left auf jedem floaten.

Sie HTML würde aussehen:

<div class="sidebar"> 
    <div id="red"></div> 
</div> 
<div class="content"> 
    <div id="green"></div> 
    <div id="orange"></div> 
    <div id="purple"></div> 
</div> 
<div class="sidebar"> 
    <div id="blue"></div> 
    <div id="yellow"></div> 
</div> 

Ihre CSS würde wie folgt aussehen:

.sidebar, 
.content { 
    float: right; 
} 

Eine andere Lösung zu verwenden Flexbox sein könnte. Um dies zu tun, sollten Sie ein anderes Elternelement um die Seitenleiste und den Inhalt erstellen. Die CSS für diese aussehen würde (nicht mehr der vorherigen CSS benötigen):

.parent { 
    display: flex; 
    flex-direction: column; 
} 

.sidebar, 
.content { 
    width: 33%; // Or however wide you need these 
} 

Ich hoffe, das hilft!