<!DOCTYPE html>
<style>
#container {
width: 400px;
text-align: right;
font: 50px/1 Ahem, sans-serif;
-webkit-font-smoothing: antialiased;
color: rgba(0, 255, 0, 0.5);
}
#shape1 {
float: right;
width: 200px;
height: 100px;
background-color: blue;
}
#shape2 {
clear: right;
float: right;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<p>The green rectangles should wrap around the left edge of the blue shape.</p>
<div id="container">
<div id="shape1"></div>
<div id="shape2"></div>
X<br>X<br>X<br>X<br>X
</div>