Atlan: 3 div-Spalten gleichlang

SELF-Forum

3 div-Spalten gleichlang

Atlan
– Informationen zu den Bewertungsregeln

Guten Abend,

das Problem wurde schon oft im Internet angesprochen, aber ich habe ein besonderes Problem, dazu habe ich noch nix gefunden. Ich hoffe mir kann trotzdem jemand helfen.

Ich möchte einen etwas größeren Footer in mein Template einbauen. Dieser hat 3 Spalten (jeweils mit "float:left;" bestückt).

  
<div id="footer">  
   <div id="linke_spalte">Text</div>  
   <!-- Trennlinie als "background: url(...) no-repeat right top;" -->  
   <div id="mittlere_spalte">Text(andere Länge)</div>  
   <!-- Trennlinie als "background: url(...) no-repeat right top;" -->  
   <div id="rechte_spalte">Text(nochmal andere Länge)</div>  
</div>

Zwischen den Spalten habe ich zwei senkrechte Trennlinien, die mit einem Verlauf aus dem Transparenten in eine volle Farbe starten und dann diese Farbe beibehalten. Da der Footer bei wenig Seiteninhalt in den oberen Hintergrundverlauf hineinragt, kann ich die Transparenz nicht durch eine bestimmte Farbe ersetzen. Des Weiteren verhindert der Transparente Verlauf in den Trennlinien, dass ich diese mit repeat-y verlängern kann => das Bild der Trennlinie ist extrem lang.

Das ist aber soweit ok, wenn da nicht ein Problem wäre. Beide Trennlinien sollen gleichlang sein, obwohl der Inhalt der 3 Boxen verschieden lang ist und von Seite zu Seite variiert.

D.h. alle 3 div-Boxen sollen gleichhoch sein.

Folgende Lösungsmöglichkeiten funktionieren aufgrund der oben beschriebenen Situation nicht:

  • durch das "float:left;" funktioniert die Variante Eltern-Div mit "min-height" und Kind-Divs mit "height: 100%;" nicht.
  • Im Eltern-div (#footer) kann ich die beiden Trennlinien nicht als Hintergrund festlegen, da ich so ein 500px breites und 800px hohes Bild einfügen müsste (viel zu groß!).

Gibt es noch eine andere Möglichkeit?

Ich weiß, dass meine Texte leider immer sehr schwer verständlich sind, aber ich habe mein Bestes gegeben. Schon einmal herzlichen Dank für Lösungsvorschläge!

MfG Atlan

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 3 div-Spalten gleichlang

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    • Im Eltern-div (#footer) kann ich die beiden Trennlinien nicht als Hintergrund festlegen, da ich so ein 500px breites und 800px hohes Bild einfügen müsste (viel zu groß!).

    Von den 400.000 Pixeln dieses Bildes duerften 398.400 vollkommen transparent sein (bei 1 Pixel Liniendicke) - das sollte sich doch hervorragend komprimieren lassen.

    Und sonst nutze halt zwei Hintergrundbilder, die jeweils nur eine Linie abbilden.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 3 div-Spalten gleichlang

      Atlan
      – Informationen zu den Bewertungsregeln

      Hi,

      danke für die Antwort!

      Von den 400.000 Pixeln dieses Bildes duerften 398.400 vollkommen transparent sein (bei 1 Pixel Liniendicke) - das sollte sich doch hervorragend komprimieren lassen.

      Ich hatte da irgendwie falsch geguckt und dachte es wären mehrere MB gewesen, dabei waren es KB. Damit wäre mein Problem gelöst ;) Wie klein der Fehler und wie einfach die Lösung manchmal ist^^

      MfG
      Atlan

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln