• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

float nicht richtig bei sehr einfachem Konstrukt

A

andre666

Neues Mitglied
Hallo Leute,
irgendwie macht html bzw. css bei mir nie das, was es soll. Ich hab hier mal meinen Quellcode.

HTML: 
<html> 
 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
 
<!-- 
<div class=""> 
</div><!-- end  --> 
 
<body> 
 
<div class="site"> 
 
<div class="footer"> 
 
<div class="footerH"></div> 
 
</div><!-- footer end  --> 
 
</div><!-- site end  --> 
 
</body> 
</html>

Code: 
.site { 
   border:5px solid black; 
   width:500px; 
} 
 
.footer { 
   border:5px solid green; 
   min-height:10px; 
} 
 
.footerH { 
   border:5px solid orange; 
   height:150px; 
   width:100px; 
   float:left; 
}

Ich hätte jetzt erwartet, das sich der footer und auch die site dem footerH anpasst, tun sie aber nicht.
Ihr habt da bestimmt eine Erklärung.

mfg Andre
 
Müsstest du nochmal näher erklären.
Grundsätzlich passen sich im Rahmen der Veerbung die untergeordneten den übergeordneten Elementen an.
Dein #footerH ist den anderen beiden untergeordnet.
Wie hättest du es also gerne?
 
footer.jpg

So siehts aus, der orange Kasten ragt aus den anderen Beiden heraus, ich hätte gedacht, die passen sich an.

Ich möchte, das sich die Elternelemente dem Kindelement anpassen.

mfg
 

Anhänge

  • footer.jpg
    footer.jpg
    29,2 KB · Aufrufe: 13
Ich hab es so verstanden:
border.png

Naja also falls du so meintest hier der Weg:
Merke dir einfach: Wer floatet, muss auch clearen!
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#site { 
   border:5px solid black; 
   width:500px; 
   
} 
#footer { 
   border:5px solid green; 
   min-height:10px; 
   
}  
#footerH {
    border:5px solid orange;
    height:150px;
    width:100px;
    float:left;
}
</style>
</head>
<body>
<div id="site"> 
    <div id="footer">
        <div id="footerH"></div><br style="clear:both;" />
    </div>
</div>
</body>
</html>
Da gibt es verschiedene Wege, Ich habe <br style="clear:both;" /> benutzt.
/edit:
Eine andere Möglichkeit:
Code: 
#footer { 
   border:5px solid green; 
   min-height:10px; 
   overflow:auto;
}
füge overflow:auto; der footder ID hinzu (achso by the way ID, benutze bei einmaligen Elementen ID's), dann kannst du dir das <br style="clear:both;" /> sparen, und es schaut professioneller aus. :razz:
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben