Hallo!

Ich komm mal gleich zur Sache:
Ich möchte auf meiner Homepage ein 3 Spalten Layout verwenden.
Eine Div je Links und Rechts mit fester Breite und eine in der Mitte mit flexibler Breite.
Dazu habe ich nun 3 Divs angelegt, mit dem Code;

(hoffe der wird hier richtig angezeigt)



#maindiv {
width: 100%;
position: absolute;
top:120px;
height: 100%;
}

#menulinks{
float:left;
width:200px;
height: 100%;
background: none;
}

#menurechts{
float:right;
width:250px;
background: #3e4f4f;
height: 100%;
}

#mitte{
background: #2f3e3e;
height: 100%;
margin:0 250px 0 200px;
padding:10px;
border-left: 8px solid #1b2424;
border-right: 8px solid #384747;
}


Und dann folgenden HTML Code:



<div id="maindiv">


<div id="menurechts"> ... </div>

<div id="menulinks"> ... </div>

<div id="mitte"> ... </div>


</div>



Die DIVS werden korrekt angezeigt, jedoch ist ihre Höhe wie angegeben nicht 100%.

In Safari sind sie nur so hoch wie der Text.

In Firefox werden die Divs alle mit einer Höhe von 100% angezeigt, aber da stimmt die Darstellung auch nicht richtig.


Vielleicht hat jemand eine einfache Lösung.

Das mit den 100% wird so in Safari nicht funktionieren. Ausserdem platzierst du ja das umschliessende div 120 pixel innerhalb der seite. 100% wären ja dann sowieso höher.

Was ist an der Darstellung in Firefox nicht richtig? Er stell es so dar, wie du es angegeben hast.
Bei Safari bekommst du das nur hin, wenn du den doctype wegläst, was aber auch nicht sinn der Sache sein kann.

Willst Du den Hintergrund einfach von oben bis unten haben? Dan setzt den doch als hintegrundbild mit wiederholung in den body.

Die divs werden sich dann nach dem Inhalt nach unten vergrössern.