Jean Pascal: float verändert die Größe eines Elements

Beitrag lesen

Hallo,

in meinem unten stehenden Quelltext habe ich einen a-tag verwendet, der eine Größe von 10em haben soll.

Merkwürdigerweise interessiert den Browser (FF) diese Größenangabe überhaupt nicht. Das a ist nur so groß wie sein Text.

Aber das größere Mysterium: Wenn ich dem a-tag ein float: left zuweise, wird plötzlich die Größe korrekt dargestellt. Weiß jemand, was es damit auf sich hat?

Hier der Quelltext ohne float:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"><html>

<head>

<style type="text/css">
body {
 background-color: #FFFFFF;
 font-size: 101%;
 margin: 0em 0em 0em 0em;
 }

a.box {
 width: 10em;
 height: 10em;
 background-color: #C0C0C0;
 text-align: left;

}
</style>

</head>

<body>

<div align="left">

<a href="test.htm" class="box">test</a>

</div>

</body>

</html>

Und hier der mit float:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"><html>

<head>

<style type="text/css">
body {
 background-color: #FFFFFF;
 font-size: 101%;
 margin: 0em 0em 0em 0em;
 }

a.box {
 width: 10em;
 height: 10em;
 background-color: #C0C0C0;
 text-align: left;
        float: left;
 }
</style>

</head>

<body>

<div align="left">

<a href="test.htm" class="box">test</a>

</div>

</body>

</html>

Ich wäre für Hilfe sehr dankbar.

Noch eine schöne Nacht, Jean