```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
 #content {
 margin-top: 100px;
 margin-bottom: 100px;
 }
.left { float: left; }
.middle { margin-left:511px; float: none;  }
.right {   float: right;   width: 115px;  }
#footer {
    margin-top: 300px;
    margin-bottom:11px;
    padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>css test</title>
</head>
<body>
    <div class="top">I have a dream</div>
    <div id="content">
        <div class="left">I am left</div>
        <div class="middle">I am middle</div>
        <div class="right">I am  right</div>
    </div>
    <div id="footer"> I am in the footer</div>
</body>
</html>

```

Above is my html source code.
It displayed in the browser like below.
![enter image description here](https://i.stack.imgur.com/zRdT6.png)

My question is why "I am right" is below of "I am middle". I think they should have the same height. How can I improve my css style. Thanks.