Dreispalten-Layout (zwei Spalten sind zu kurz)

anagramm

Salut!

Ich habe mittels drei, nebeneinander platzierten Divs ein Layout hergestellt. Im Mittleren Div befindet sich der Text, die beiden äusseren dienen der Dekoration.
Weiter sind jene auf height: 100% gestellt.

Ist der Text im mittleren Div nun grösser als 100% (also das man scrollen muss), sind die äusseren beiden Divs zu klein.

Hat jemand eine Idee wie ich dem Einhalt gewähren kann?

http://img812.imageshack.us/img812/4372/bi…to20101223u.png

Beste Grüsse
Anagramm

Grevas

benutz statt height: 100% mal min-height: 100%
Clearen nicht vergessen.

Ansonsten gib n Link.

anagramm

nanu
jetzt ist alles weg...

ich hab hier sonst mal den quelltext von dem abschnitt, vielleicht hilft der etwas besser.

Code

div#rand_links {
                float: left;
                width: 160px;
                background-color: #e6e6e6;
                background-image: url('images/ra_links.jpg');
                background-repeat:repeat-y;
                background-position: right;
                min-height: 100%;
            }
            div#rand_rechts {
                float: right;
                width: 160px;
                background-color: #e6e6e6;
                background-image: url('images/ra_rechts.jpg');
                background-repeat:repeat-y;
                background-position: left;
                min-height: 100%;
            }
            div#container {
                padding: 0px 160px 0px 160px;
                margin: 0px;
                background-color: #ffffff;
                height: 100%;
            }


[...]
<div id="rand_links"></div>
    <div id="rand_rechts"></div>
    <div id="container">blabla</div>

Alles anzeigen

Vielleicht ist auch einfach meine Strategie mit den drei divs dumm?

sejuma

Das ist ein Fall für Faux Columns

anagramm

gemäss dieser anleitung geht das bei mir aber nicht, da bei mir die beiden "schatten-bilder" je 160px gross sind, und damit eine feste grösse haben. das Mittel-Div hingegen ist variabel in der grösse.

Diese Anleitung geht entweder vom einen oder vom anderen aus - gibt es das nicht auch in Kombination?

Grevas

Nicht ganz.
Wenn dann http://www.ohne-css.gehts-gar.net/0031.php

Und auch das funktioniert so nicht. Man kann mit den 160px Breite nichtmehr arbeiten, es muss eine % Angabe sein.
Wenn man prozentuale Werte mit fixen Werten mischen will, habe ich bisher keine Vernünftige alternative zu Tabellen gefunden...

//P.S. Aber dieses Beispiel lässt sich auch anders lösen.. Momentchen

anagramm

Alles klar, dann mache ich das jetzt einfach mit einer einfachen Tabelle. Ich bin sowieso Fan von Tabellen XD
Habe nur auf Div umgestellt, weil mich immer alle ausgelacht haben wenn ich Tabellen nutzte^^

Trotzdem danke für eure Hilfe! Wünsche euch schöne Weihnachten und einen guten Rutsch!

Grevas

HTML

<style>


#content {
    padding: 0 160px;
    background-color: #fff;
    min-height: 100%;
    height: 150%; /* prove of concept */
}


#left-border {
    float: left;
    width: 5px;
    margin-left: -5px;
    background-color: yellow;
    height: 100%;
}


#right-border {
    float: right;
    width: 5px;
    margin-left: 5px;
    background-color: blue;
    height: 100%;
}


</style>


<div id="content">
    <div id="left-border"></div>
    <div id="right-border"></div>
    <p>content</p>


</div>

Alles anzeigen

In dem Fall geht das aber ooohne ;P

Tags