✔ Spalten gleich hoch halten

[ZeroEnna]

Hallo allerseits

Ich bin gerade daran einen Entwurf für meine neue Homepage um zu setzten und bin nun auf ein kleines Problem gestossen.

Ich will das ganze Layout ohne Tabellen umsetzen (also mit Divs und Listen).
Nun erfordert das Layout dass die Navigation und der Contentbereich immer gleich hoch sind. Aber egal was ich mache, die Navigation will einfach nicht die Höhe vom Contentbereich annehmen.

Momentan sieht der Kontainer der die Navigation und den Contentbereich enthält wie folgt aus:

<div id="container">
     <div id="navigation">
     </div>
     <div id="content">
     </div>
</div>

Und hier das Sytlesheet:

<style type="text/css">
        #container {
            height: auto;
        }
        
        #content {
            background: #FFFFFF;
            border: 1px solid #B9B9B9;
            float: left;
            width: 663px;
        }
        
        #navigation {
            background: #FFFFFF;
            border: 1px solid #B9B9B9;
            float: left;
            height: 100%;
            margin-right: 3px;
            padding: 0;
            width: 143px;
        }
</style>

Im angehängten Bild sehr ihr die genaue Aufteilung der Seite.
Ich hoffe ihr könnt mir da weiterhelfen.

mfG
ZeroEnna

 

[Maik]

Ich empfehle dir hierfür die Faux-Columns-Technik, oder meine angehängten Lösungsbeispiele in dem Thread div height=100% nur im IE?, um für mehrere Spalten, unabhängig von ihrem Inhalt, eine einheitliche Höhe einzurichten:

1. http://www.tutorials.de/forum/1223592-post13.html
   
2. http://www.tutorials.de/forum/1274347-post15.html

 

[ZeroEnna]

Vielen Dank für deine Hilfe.

Aber eine Hintergrundgrfik zu verwenden wollte ich eigentlich verhindern. Denn jedes mal wenn ich die Breite der einzelnen Spalten anpasse, muss ich auch die Hintergrundgrafik anpassen.

Hat jemand vielleicht noch eine andere Lösung?

Ich bin auf folgende Seite gestossen: http://alistapart.com/articles/holygrail
Leider schaffe ich es nicht das ganze so an zu passen, dass es in mein Layout passt.

Ich habe noch das ganze HTML-Dokument angehängt, um das ganze ein bisschen besser dar zu stellen.

 

[Maik]

Es gibt zwar alternative Techniken, die ohne eine in der Y-Achse zu wiederholenden Hintergrundgrafik arbeiten, nur sind diese für dein gewünschtes Seiten- bzw. Layoutkonzept nicht geeignet / verwendbar, da diese Spalten lediglich eine Hintergrundfarbe besitzen können:

1. stu nicholls | CSS PLaY | three column layout | simple version
   
2. The Holy Grail of Layouts: Example #3: A List Apart

 

[ZeroEnna]

OK, muss dann wohl oder übel doch eine Hintergrundgrafik verwenden. Vielen Dank für deine Hilfe.

mfG
ZeroEnna