<!DOCTYPE html>
<html>
<head>
<style>
#content {
font: 50px/1 Ahem, sans-serif;
-webkit-font-smoothing: antialiased;
color: green;
width: 300px;
border: 1px solid black;
}
#right-shape {
float: right;
width: 50px;
height: 50px;
background-color: blue;
}
#left-shape {
float: left;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<p>The blue squares on the left and right should be surrounded by three green squares.</p>
<div id="content">
<div style="text-align: right">
X<br>
<div id="right-shape"></div>
X<br>X
</div>
X<br>
<div id="left-shape"></div>
X<br>X
</div>
</body>
</html>