background-color: #f6f6b8; position: relative; height: 30px
background-color: #c9ebe3; position: relative; height: 50px; padding:10px
background-color: #f6c3f6; position: relative; height: 50px; padding:10px; margin-top:10px
background-color: #c4ebc4; position: relative; height: 50px; padding:10px; margin-top:10px
background-color: #f6f6b8;
position: relative;
padding: 10px;
margin-top: 10px;
width: 25%;
float: left;
background-color: #c9ebe3;
position: relative;
padding: 10px;
margin-top: 10px;
width: 40%;
float: left;
margin-left: 10px;
margin-bottom: 10px;
background-color: #f6c3f6;
position: relative;
padding: 10px;
margin-top: 10px;
width: 20%;
margin-left: 10px;
float: left;
background-color: #cccccc; position: relative; padding: 10px; border-color: #666; border-width: 3px; border-style: double; clear: left
In the box above, clear: left is used to cancel the side-by-side effect of the previous box's float property and makes sure that the box moves down underneath the tallest box above it.