OK so here is my code

```html
<html>
<head>
<style>
.div1{
 height:40px;
 width:40px;
 background-color:red;
 display:block;
 float:left;
} 
.div2{
 height:40px;
 width:40px;
 background-color:green;
 display:block;

}
.div3{
 height:40px;
 width:40px;
 background-color:yellow;
 display:block;
}
</style>
</head>

<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>

</html>
```

I want my website to look like this: first square is red, next to is green, and below red is yellow square. I thought that float left on first element should make next one jump right next to him. Why doesn't it work?