I have two float list one from the right and one from the left. The left float list is on top and the right on bottom. I want the right to be below the left like this:

![enter image description here](https://i.stack.imgur.com/84Pvo.png)

However, my code produces this:

![enter image description here](https://i.stack.imgur.com/8BCdG.png)

How can I force the left float list not to break? And why does it break anyway? This is my code

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Floats dont like me.</TITLE>
  <style type="text/css" media="screen">
     .small { height:20px;width:65px;border:solid;float:left;margin-left:10px;margin-  top:10px }
     .smallR { height:20px;width:65px;border:solid;float:right;margin-right:10px;margin-top:50px; }
  </style>
</HEAD>
<BODY>
<div style='width:300px;height:100px;border:solid'>
<div class='smallR' ></div>
<div class='small' ></div>
<div class='small' ></div>
<div class='small' ></div>
</div></BODY></HTML>

```