float left macht was komisches

[tropenberta]

hi leuts

bastel an ner seite :

  
<div id="wrapper">  
  
  <div id="header">  
    <a href="#"> <img src="images/header.JPG" alt="" border="0" width="1000" height="216"> </a>  
  </div>   <!--header-->  
  
  <div id="text_start">  
         <h4>Stet clita kasd gubergren, no sea takimata sanctus est Lorem</h4>  
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
  </div>   <!--text_start-->  
  
  <div id="navi">  
    <a href="#"><div class="navifield" style="margin:0;"> Produkte </div></a>  
    <a href="#"><div class="navifield" style="left:408px;"> Unternehmen</div></a>  
    <a href="#"><div class="navifield" style="left:608px; width:200px;">Hersteller</div>  </a>  
    <a href="#"><div class="navifield" style="left:812px;"> Referenzen</div> </a>  
    <a href="#"><div class="navifield" style="left:1012px;"> Über uns</div>  </a>  
  </div>   <!--navi-->  
  
</div>    <!--wrapper-->  

html, body {  
background-color: #333333;  
margin: 0;  
padding: 0;  
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */  
}  
  
#header {  
position:fixed;  
top:0;  
}  
  
#wrapper {  
background-color: #FFFFFF;  
width: 1000px;  
margin: auto; /* Div soll zentriert werden */  
min-height: 100%; /* Mindesthöhe für moderne Browser */  
height:auto  /* Important Regel für moderne Browser */  
height:100%; /* Mindesthöhe für den IE */  
background-image:URL("../images/bg1.JPG");  
background-attachment:fixed;  
background-size: 1250px 100%;  
}  
  
#navi {  
position:fixed;  
background-image:URL("../images/bg1.JPG");  
bottom:0px;  
width:1000px;  
height:90px;  
}  
  
.navifield {  
float:left;  
text-decoration:none;  
bottom:0px;  
position:fixed;  
list-style:none;  
margin-left:4px;  
font-family:Arial;  
color:white;  
font-size:26px;  
background-color:#8B460A;  
width:196px;  
height:50px;  
text-align:center;  
padding-top:7px;  
}  
  
#text_start {  
width:400px;  
margin-left:60px;  
margin-top:40px;  
padding-bottom:80px;  
padding-top:200px;  
font-family:Arial;  
}  

Ich möchte jetzt #text-start ein float:left verpassen um ein weiteres element links davon zu plazieren. wenn ich aber dem element #text-start das float:left verpasse schneidet es mir den hintergrund in der höhe ab.
mach ich das float:left weg passt sich der hindergrund in der höhe dem element text_start wieder an.

warum verhält sich das so ? float sagt doch nur das sich ein element in die jeweilige richtung (left und right) ausrichten soll. warum wird dann nicht mehr mein background gestreckt wenn ich float verwende ? die höhe des divs ändert sich doch nicht.

gruss
micha