<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <style type="text/css">
   div { border: 1px solid teal; padding: 4px; margin: 4px; }
   .left { float: left; }
   .right { float: right; }
   .size { width: 150px; height: 150px; }
  </style>
 </head>
 <body>

  <p>The content before should be to the right of the inner square,
     and both it and the inner square should be surrounded by an outer box.</p>

  <div class="left"><div class="size left"></div>content before</div>

 </body>
</html>