✔ Anzeigeproblem: Mehrere Spalten mit DIV's

[Miraculixx]

Ich habe gelesen, dass es "besser" wäre, für die Gestaltung einer Homepage DIV's zu verwenden und auf Tabellen zu verzichten.

Ich bin gerade dabei eine Seite aufzubauen und habe nun folgendes Problem:
Der Inhalt der Seite wird in drei Spalten angezeigt.
Ganz unten soll dann noch eine kleine Info-Zeile sein.
Beispiel siehe Bild.
http://picfront.org/picture/0rxgC6Rhm/dia/bsp1.gif

Jetzt kann es aber vorkommen, dass nicht die mittlere, sondern die rechte oder die linke Spalte am längsten ist:
http://picfront.org/picture/JjqP60kE/dia/bsp2.gif
http://picfront.org/picture/A1qtlo02M3/dia/bsp3.gif

Meine Frage ist nun, wie ich diese DIV's definieren muss, damit diese Bottom-Zeile immer ganz unten ist?

Wenn ich alle Inhalts-DIV's als "psition: absolute;" definiere, dann verbrauchen sie keinen Platz, und die Bottom-Zeile hängt ganz oben an der Seite (bei dem TOP-DIV).
Wenn ich jetzt aber die INHALT-DIV's als "position: relative" deklariere, dann wird die erste spalte normal angezeigt, die zweite rechts daneben, aber darunter, und die dritte noch weiter unter der zweiten spalte. und dann ganz unten der bottom-DIV.
Siehe:
http://picfront.org/picture/xZu2A4V91/dia/

Ich hoffe, es ist irgendwie verständlich was ich meine.
Und für Tipps bin ich euch jetzt schon sehr sehr dankbar!

 

[Maik]

Hi,

hast du schon versucht, das mehrspaltige Layout mit der float-Eigenschaft umzusetzen?

div#leftCol {
width: 150px;
float: left;
}

div#rightCol {
width: 150px;
float: right;
}

div#centerCol {
margin: 0 155px 10px 155px;
}

div#bottom {
clear: both;
border: 1px solid #000;
}

div.content {
border: 1px solid #000;
margin-bottom: 5px;
}

<div id="leftCol">
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
</div>
<div id="rightCol">
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
</div>
<div id="centerCol">
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
</div>
<div id="bottom">bottom</div>

 

[Miraculixx]

WOW! Das hat geklappt

Ich habs zwar bisschen anders realisiert als du. Aber mit dem float:left und float:right hat es dann im Endeffekt funktioniert.

Ich sage herzlichen Dank für deine Hilfe!

Thx,
Miraculixx

 

[Miraculixx]

Sorry, das Problem ist leider doch noch nicht ganz gelöst.

Und zwar im Firefox: Sobald ich ein DIV mit "float:xxxx" definiere, ignoriert er den Platz, den dieses DIV verbraucht.
In diesem Beispiel wäre das bei div#leftCol und div#rightCol der Fall.

Das heißt im Klartext: Im Firefox orientiert sich der Bottom-DIV nur nach der Höhe des div#centerCol - ignoriert aber die Höhe von der linken und der rechten Spalte.

Im Opera funktioniert es allerdings problemlos.
Im IE wird zwar alles von den Proportionen her etwas anders dargestellt - aber der Bottom-DIV wird zumindest richtig positioniert.

Aber hast du noch einen Tipp, wie ich das auch für den Firefox hinbekommen könnte?
Wäre dir sehr dankbar.

 

[Maik]

Hi,

könntest du bitte mal deinen aktuellen Quellcode (HTML + CSS) zeigen?

Basierend auf meinem Quellcode von gestern, funktioniert bei mir das folgende Konstrukt im Firefox einwandfrei:

div.float_left {
float: left;
width: 75px;
background: #eaeaea;
margin-bottom: 5px;
}

<div id="leftCol">
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
     <div class="float_left">Inhalt</div>
</div>
<div id="rightCol">
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
</div>
<div id="centerCol">
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
     <div class="content">Inhalt</div>
</div>
<div id="bottom">bottom</div>

Oder habe ich dich jetzt missverstanden?

 

[Miraculixx]

Ah mist.
Du hattest natürlich Recht

Ich hab in div.bottom die Zeile "clear: both;" vergessen.
Eigentlich hab ich zwar keine Ahnung, was das bedeuten soll - aber mit der Zeile funktionierts

Herzlichen Dank noch mal.

 

[Maik]

Mit der clear-Eigenschaft wird nach den floatenden Boxen wieder der normale Textfluss hergestellt, oder anders ausgedrückt, die float-Eigenschaft wieder aufgehoben.