• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Höhe des Inhalts wird ignoriert

S

ska

New member
Hi

Bin ein wenig verwundert über die Darstellung folgender einfacher Seite im Mozilla und Netscape. Ich dachte eine Außenbox ist so hoch wie ihr Inhalt. Korrekt (Box grau) ist die Ansicht lediglich im IE.

Wenn ich eine Höhe für #hpt definiere, wird die Box #hpt im Mozilla, Netscape in dieser Höhe angezeigt und der Inhalt wird ignoriert.

Wo ist denn da mein Denkfehler oder was ist nun korrekt?

Gruß
Stefan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title></title>
<style type="text/css">
#hpt { width: 780px; background-color: #CCCCCC; }
#links { text-align: left; width: 150px; float:left; }
#mitte { text-align: left; width: 480px; float:left; }
#rechts { text-align: left; width: 150px; float:left; }
</style>
</head>
<body>
<div id="hpt">
<div id="links">Links</div>
<div id="mitte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
<div id="rechts">Rechts</div>
</div>
</body>
</html>
 
du musst nach den element die du floatest, auch wieder entfloaten, um nachfolgendes nicht zu irretieren und korrekt anzuzeigen.

deswegen muss nach gefloateten elementen ein clear:both; was die floatkette an dieser stelle unterbricht.

so geht es:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title></title>
<style type="text/css">
#hpt { width: 780px; background-color: #CCCCCC; }
#links { text-align: left; width: 150px; float:left; }
#mitte { text-align: left; width: 480px; float:left; }
#rechts { text-align: left; width: 150px; float:left; }
.clearboth {font-size:1px;line-height:0px;clear:both;}
</style>
</head>
<body>
<div id="hpt">
<div id="links">Links</div>
<div id="mitte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
<div id="rechts">Rechts</div>
<br class="clearboth" />
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben