3-Spalten-Layout unter 2-Spalten-Layout setzen

[cocoon]

Ich möchte folgendes Layout erzeugen:

-------------------------
|        Header         |
-------------------------
|       |               |
|       |               |
|  Nav  |     Main      |
|       |               |
|       |               |
-------------------------
|       |       |       |
| foot1 | foot2 | foot3 |
|       |       |       |
-------------------------

Bereits funktionieren tut der erste Teil, d.h. header, nav und main. Jetzt versuche ich den dreispalten footer darunter zu setzen. Leider wird er (im FF, IE bislang nicht getestet) immer unter den Header gesetzt statt nach unten, egal, ob ich ihn innerhalb des container-div setze oder ausserhalb, egal ob mit clearfix oder ohne.. Ich verzweifle mal wieder..

<div id="container">
   <div id="header"></div>
   <div id="sidebar"></div>
   <div id="content"></div>
</div>

 

[Maik]

Hi,

wenn du hier wegen einem "CSS-Problem" vorsprichst, solltest du auch deinen CSS-Code vorstellen.

In diesem Probelauf hab ich die drei Blöcke (foot1 - 3) in einen übergeordneten Block #footer eingebettet, der mit clear:left formatiert ist, und so "rutscht" der Bereich auch nicht unter den Header:

<div id="container">
   <div id="header">header</div>
   <div id="sidebar">sidebar</div>
   <div id="content">content</div>
   <div id="footer">
        <div class="foot">foot1</div>
        <div class="foot">foot2</div>
        <div class="foot">foot3</div>
   </div>
</div>

#container {
width:900px;
}
#header {
height:100px;
}
#sidebar {
float:left;
width:200px;
}
#content {
margin-left:200px;
}
#footer {
clear:left;
}
.foot {
float:left;
width:300px;
}

mfg Maik

 

[cocoon]

Dank Dir, aber leider rutschen die drei unteren Spalten immer noch nach oben zwischen Header und Zwei-Spalten-Layout:

<div id="container">
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="content"></div>
    <div id="footer_sitemap">
        <div class="footer_sitemapPart">foot1</div>
        <div class="footer_sitemapPart">foot2</div>
        <div class="footer_sitemapPart">foot3</div>
    </div>
</div>

#container {
position: relative;
width: 990px;
margin: 0 auto;
}

#header {
margin-bottom: 20px;
}

#sidebar {
position: absolute;
left: 0;
width: 320px;
}

#content {
position: absolute;
left: 340px;
width: 650px;
}

#footer_sitemap{
clear:left;
}

.footer_sitemapPart {
float:left;
width:330px;
}

 

[Maik]

Elemente umfliessen lassen, oder sie im Viewport absolut positionieren, sind zwei Paar Schuhe. Da nützt das "Clearing" dann natürlich herzlich wenig.

Wie gesagt, das nächste Mal bitte gleich den ganzen Code posten, damit hier erst keine Mißverständnisse aufkommen können - vielen Dank!

mfg Maik

 

[cocoon]

Weißt Du denn, wie ich den Footer jetzt korrekt realisiere? Hatte bereits versucht, ihn ebenfalls zu positionieren (Sidebar und Content in ein DIV, dann das Footer DIV mit top: 0 und left: 0 darunter positioniert), aber das hat auch nicht funktioniert.

 

[Maik]

Wenn der Footer bei zunehmenden Inhalt in den Spaltenblöcken nach unten geschoben werden soll, bist du hier mit ihren absoluten Positionierungen schlecht beraten, da es hierfür keine Lösung gibt.

Wie's funktioniert, hab ich dir zu Beginn demonstriert.

mfg Maik

 

[cocoon]

So wie von Dir oben beschrieben habe ich es jetzt auch nochmal versucht. Leider zerschiesst mir das wiederum das content DIV, welches dann nämlich (um die Höhe des Sidebar-Inhaltes) nach unten rückt. Ich nehme an, dies passiert deswegen, weil ich im content-DIV bei einigen Elementen die clear-Eigenschaft angegeben habe. Daher habe ich dies auch versucht rauszunehmen, was mir das content-DIV dann aber auf andere Weise zerschiesst.

<div id="container">
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="content">
        <div class="searchForm"></div>
        <div class="pageMenu"></div>
        <div id="mainContent"></div>
    </div>
    <div id="footer_sitemap"></div>
</div>

#container {
position: relative;
width: 990px;
margin: 0 auto;
}

#header {
margin-bottom: 20px;
}

#sidebar {
position: absolute;
left: 0;
width: 320px;
}

#content {
position: absolute;
left: 340px;
width: 650px;
}

#footer_sitemap{
clear:left;
}

.pageMenu {
clear: both;
}

.searchForm {
margin: 0;
padding: 0;
font-size:0.8em;
background:url(img/searchbox.gif) no-repeat;
width:150px;
height:23px;
float: right;
}

#mainContent {
clear: both;
position: relative;
background: white url(img/tr_white.gif) no-repeat top right;
min-height: 300px;
height: auto !important;
height: 300px;
padding: 2em;
color: black;
}

 

[Maik]

So wie von Dir oben beschrieben habe ich es jetzt auch nochmal versucht. Leider zerschiesst mir das wiederum das content DIV, welches dann nämlich (um die Höhe des Sidebar-Inhaltes) nach unten rückt. Ich nehme an, dies passiert deswegen, weil ich im content-DIV bei einigen Elementen die clear-Eigenschaft angegeben habe.

Dann tausch mal in meinem Beispiel diese Zeilen:

#content {
margin-left:200px;
}
#footer {
clear:left;
}

gegen diese aus:

#content {
float:right;
width:650px;
}
#footer {
clear:both;
}

mfg Maik

 

[cocoon]

Klasse, Dank Dir vielmals! Kannst Du mir erklären, warum es so funktioniert bzw. warum vorher nicht? Liegt es daran, dass vorher immer links gefloatet wurde?

 

[Maik]

Der Block, in dem weitere Floats "gecleart" werden, muß mit einer float-Deklaration aus dem normalen Textfluß genommen, damit es nicht zum geschilderten Umbrechen kommt.

mfg Maik