Gelöst: WordPress Theme Twenty Thirteen sidebar overlaps footer

Beim umbauen des an sich sehr schönen und gut programmierten WordPress Theme „Twenty Thirteen“, das standardmäßig seit WordPress 3.6 mit ausgerollt wird, ist mir aufgefallen, dass die sidebar, wird sie denn länger als der content, über den Footer ragt. An sich geht man davon aus, daß eine Seite einfach länger wird, wenn der Inhalt sich vermehrt, und dass der Footer auch immer schön „unter“ dem Main-Content bleibt.

Das verhält sich im Standart in Theme „Twenty Thirteen“ aber ganz anders. Da wird die Sidebar zwar länger, aber der Footer schiebt sich nicht einfach weiter nach unten. Nein, er hängt schön am Contentbereich.

Dieses Problem scheinen echt viele Developer zu haben, die dieses WordPress Theme benutzen. So findet man im Netz auch etliche Hilferufe zu diesem Thema. Angeblich gibt es dazu auch schon einen offiziellen Fix für das Theme, den konnte ich aber nicht wirklich finden. Manche haben JavaScript bemüht, um die Höhe der content-area auszulesen und diese dann auch der Sidebar zu geben. Das war mir aber auch etwas zu viel des Guten. Man muss das doch auch mit CSS lösen können?

Ich hatte meine Sidebar eh schon von der rechten auf die linke Seite gestellt, damit veränderte sich auch schon ein bischen im CSS. Was musste ich nun noch machen? Ich habe um Sidebar und contetn-area noch ein <div> gebaut. Das wurde dann mit per CSS auf Breite usw. abgestimmt:

.content-main-wrapper {
clear: both;
margin: 0 auto;
max-width: 977px;
}

Dann musste noch am CSS der Sidebar verändert werden. So sah das vorher aus:

.site-main .sidebar-container {
height: 0;
position: absolute;
top: 477px;
width: 100%;
z-index: 1;
}

Und jetzt sieht das so aus:

.site-main .sidebar-container {
top: 477px;
float:left;
z-index: 1;
}

Wobei man den z-index auch noch weg lassen könnte.

Damit wird der Footer nun schön immer unter dem Inhalt der Seite bleiben. Egal, ob die Sidebar nun länger wird als der content, oder andersherum.