<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <title>Floats and BFCs with horizontal margins</title>


  <style type="text/css">
  div.container
  {
  border: silver solid 5px;
  margin: 1em;
  width: 640px;
  }

  div.floatL
  {
  background-color: lime;
  float: left;
  height: 1em;
  }

  div.floatR
  {
  background-color: lime;
  float: right;
  height: 1em;
  }

  div.overflow
  {
  background-color: orange;
  margin-left: 100px;
  margin-right: 100px;
  overflow: auto;
  }

  .width0 {width: 0;}

  .width50 {width: 50px;}

  .width100 {width: 100px;}

  .width150 {width: 150px;}
  </style>

 </head>

 <body>

  <h1>Margins and block formating contexts (<a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0975.html">additional tests from Alan Gresley</a>)</h1> 

  <!--
  non-positioned block boxes created before and after the float box 
  flow vertically as if the float did not exist.
  http://www.w3.org/TR/CSS21/visuren.html#floats
  
  The border box of (...) an element in the normal flow that 
  establishes a new block formatting context (such as an element with 
  'overflow' other than 'visible') must not overlap the margin box of 
  any floats in the same block formatting context as the element itself.
  http://www.w3.org/TR/CSS21/visuren.html#floats
  -->

  <h3>The orange stripe has 'overflow: auto', 'margin-left: 100px' and 'margin-right: 100px'<br> The lime stripes are floats with various width (topmost is 0, bottommost is 150px)<br>The wrapping container has a solid silver border.</h3>

  <div class="container"><div class="width0 floatL">floatL</div><div 
class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>

  <div class="container"><div class="width50 floatL">floatL</div><div 
class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>

  <div class="container"><div class="width100 floatL">floatL</div><div 
class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>

  <div class="container"><div class="width150 floatL">floatL 150px</div><div 
class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>

  <div class="container"><div class="width0 floatR">floatR</div><div 
class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>

  <div class="container"><div class="width50 floatR">floatR</div><div 
class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>

  <div class="container"><div class="width100 floatR">floatR</div><div 
class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>

  <div class="container"><div class="width150 floatR">floatR 150px</div><div 
class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>

  <!--
  non-positioned block boxes created before and after the float box 
  flow vertically as if the float did not exist.
  http://www.w3.org/TR/CSS21/visuren.html#floats  
  
  The border box of (...) an element in the normal flow that 
  establishes a new block formatting context (such as an element with 
  'overflow' other than 'visible') must not overlap the margin box of 
  any floats in the same block formatting context as the element itself.
  http://www.w3.org/TR/CSS21/visuren.html#floats
  -->

  <h3>The orange stripe has 'overflow: auto', 'margin-left: auto' and 'margin-right: auto'<br> The lime stripes are floats with various width (topmost is 0, bottommost is 150px)<br>The wrapping container has a solid silver border.</h3>

 </body>
</html>