css, float, 2 Spalten

[schnalbi]

Hallo
Ich habe ein 2 Spalten-layout mit Kopf und Fussbereich.

In der linken Spalte ist die Navigation.

Im Contentbereich möchte ich nun eine kleine Toolbox einfügen, doch die wird immer auf die Höhe der Navigation vergrössert.

<div id="container">  
  <div id="kopf_left"><?php echo $logo;?></div>  
  <div id="kopf_right">  
    <span>Eingeloggt als <?php echo ADMIN_NAME;?></span>  
    <span><u>logout</u></span>  
    <span><?echo $inc_mail;?></span>  
  </div>  
  <div id="main">  
    <div id="menu"><?echo $navigation;?></div>  
    <div id="content"><?echo $ausgabe;?></div>  
  </div>  
  <div id="footer">by schnalbi</div>  
</div>

#container{  
  margin-top: 10px;  
  margin-left: auto;  
  margin-right: auto;  
  width: 95%;  
}  
  
#kopf_left{  
  color:  #333388;  
  padding-top: 10px;  
  padding-left: 30px;  
  position: relative;  
  float: left;  
  width: 400px;  
  font-size: 16px;  
  text-align: left;  
  background-color: #ffffff;  
  height: 50px;  
  font-weight: bold;  
}  
  
#kopf_right{  
  background:url("../bilder/hg/kopfrechtsbg.jpg") no-repeat right;  
  background-position:10px 0 0 0;  
  background-color: #ffffff;  
  padding-right:50px;  
  padding-top: 10px;  
  margin-left: 400px;  
  text-align: right;  
  height: 50px;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
#main{  
  margin-top: 20px;  
  
}  
  
#menu{  
  float: left;  
  width: 140px;  
  background-color: #e3eeee;  
  border-right: 1px solid #222244;  
  border-bottom: 1px solid #222244;  
  font-size: 12px;  
  
}  
  
#content{  
  height: auto;  
  width: auto;  
  margin-top: 15px;  
  margin-left: 150px;  
}  
  
#footer{  
  clear: both;  
  background-color: #aaddff;  
  color: #000;  
  clear: both;  
  text-align: center;  
  
}  
  
div.tools{  
  background-color: #f3f7ff;  
  width: auto;  
}  
  
div.tools li{  
  float: left;  
  width: 100px;  
  display: block;  
  margin: 10px;  
  background-color: #e9f0fd;  
  text-align: center;  
  font-size: x-small;  
  list-style:none;  
}  
  
div.legende{  
  background:url("../bilder/hg/kopf.jpg") repeat-x;  
  border-left: 1px solid #779ed5;  
  border-bottom: 1px solid #779ed5;  
  border-right: 1px solid #779ed5;  
  -moz-border-radius-topleft: 10px;  
  -moz-border-radius-topright: 10px;  
  -khtml-border-radius-topleft: 10px;  
  -khtml-border-radius-topright: 10px;  
}  
  
  

[kubitsch]

Hallo,

Dein HTML-Code ist fehlerhaft.
Dein HTML-Code enthält keine Klasse tools.

[schnalbi]

Hallo,

Dein HTML-Code ist fehlerhaft.
Dein HTML-Code enthält keine Klasse tools.

oh sry, der ist in dem $ausgabe

klasse nofloat = clear: left;

function navibutton($name, $bild, $link){  
  
  return "<li>  
            <a href=\"include.php?path=$link\">  
              <img style=\"border: 1px solid #c0c0c0;\" src=\"bilder/icons/$bild\"><br />$name  
						</a>  
          </li>";

}

  
$ausgabe .= "<div class=\"tools\">  
               <div class=\"legende\">Tools</div>  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
               ".navibutton("Logbuch", "key_j.png", "log")."  
            </div>  
            <div class=\"nofloat\"></div>";  
$ausgabe .= "<p class=\"ueberschrift\">gesamte Seite</p>.....";