nokill: [Layout] Problem bei Positionierung von <div>s

Hi,

ich mache greade ein Layout für unsere Clanpage (wie ein paar vielleicht wissen). Mein problem ist, dass ich nicht weiß wie ich das <div>-Element  für die rechte Navigationsleiste richtig positionieren soll. so sollte es aussehen

------------------------------------            -                                  -            -                                  -            -               head               -            -                                  -            ------------------------------------            -navi-                        -navi-            -left-                        -righ-            -    -                        -t   -            -    -                        -    -            -    -                        -    -            -    -          body          -    -            -    -                        -    -            -    -                        -    -            -    -                        -    -            -    -                        -    -            -    -                        -    -            -    -                        -    -            ------------------------------------            -  Footer                          -            ------------------------------------

Derzeit sieht es so aus:            ------------------------------------            -                                  -            -                                  -            -               head               -            -                                  -            ------------------------------------            -navi-                             -            -left-                             -            -    -                             -            -    -                             -            -    -                             -            -    -          body               -            -    -                             -            -    -                             -            -    -                             -            -    -                             -            -    -                             -            ------------------------------------            -navi-                             -            -righ-                             -            -t   -                             -            -    -                             -            -    -                             -            -    -                             -            -    -                             -            -    -                             -            -    -                             -            -    -                             -            -    -                             -            -    -                             -            ------------------------------------            -  Footer                          -            ------------------------------------

Jetzt mal der entsprechende Quelltext:

<html>      <head>           <title>Titel der Seite</title>           <style type="text/css">           <!-- body { background-color:#C0C0C0;        margin:0px;        width:100%;        height:100%;      }

#body { background-color:#FF7F00;         margin:0px;         width:80%;         height:100%;         float:none;       }

#head { background-color:#99CC66;         margin:0px;         width:100%;         height:20%;       }

#navi_left { background-color:#FFBF00;              width:20%;              float:left;              height:75%;            }

#site { background-color:##009090;         width:60%;         height:75%;       }

#navi_right { background-color:#999966;               width:20%;               height:75%;             }

#footer { background-color:#99CC66;           width:100%;           clear:left;         }           //-->      </head>      <body>           <div id="body">                <div id="head">                     --Head--                </div>                <div id="navi_left">                     --Navi_left--                </div>                <div id="site">                     --Site--                </div>                <div id="navi_right">                     --Navi_right                </div>                <div id="footer">                     --Footer--                </div>           </div>      </body> </html>

Bitte wundert euch nicht wegen den komischen Fraben, die habe ich nur gewählt damit die die Elemente besser auseinander halten kann und nicht erst suchen muss ;)

schon mal danke im vorraus für die Hilfe

cya nokill

  1. Hallo nokill

    Schau dir folgende Seite an.
    http://www.css4you.de/wslayout1/ex0010.htm

    MFG
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!