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

[misterunknown]

Moin,

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 ?

Das passiert, weil das Element außerhalb des normalen Flusses die Höhe des Elements nicht mehr beeinflusst.

die höhe des divs ändert sich doch nicht.

Doch. Der Div ist nur noch so groß, wie der Hintergrund anzeigt. Der Inhalt des gefloateten Elements ragt darüber hinaus!

Lösung:

#wrapper {  
   overflow:auto;  
}  

Hinweis: Für solche Beispiele kann man super einen Online-Dienst für Online-Beispiele verwenden. Das hilft Helfern ungemein ;)

Grüße Marco

[Gunnar Bittersmann]

@@tropenberta:

nuqneH

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.

„Das Element mit float:left - floatendes Element oder schlicht »Float« genannt - beeinflusst die Höhe des Container-Elements allerdings nicht.“ [molily]

Qapla'

PS: Mit HTML hat das nichts zu tun.

[tropenberta]

vielen dank für eure antworten.

hab wieder was gelernt.

overflow:auto funktioniert.

gruss micha

[molily]

Hallo,

overflow:auto funktioniert.

Siehe Nachteile von overflow: hidden (gilt natürlich auch für overflow: auto).

Was du suchst ist eher der Clearfix. Eine übliche Umsetzung ist http://nicolasgallagher.com/micro-clearfix-hack/.

Mathias