title: Parent div with margin and with auto and child with 100% do not fill full width
body: <p>What I would like to do is to create a menu which fills all width but some margin at left and right.
  This is the structure:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="content"&gt;
          &lt;div class="element"&gt;
              &lt;a&gt;&lt;p&gt;Text1&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="element"&gt;
              &lt;a&gt;&lt;p&gt;Text2&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="element"&gt; 
              &lt;a&gt;&lt;p&gt;Text3&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="element"&gt;
              &lt;a&gt;&lt;p&gt;Text4&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the css:</p>
  
  <pre><code>.parent
  {
      width:100%;
      float:left;
  }
  .content
  {
      width:auto;
      margin:0 20px;
      float:left;
      border-top:1px solid;
      border-left:1px solid;
      border-right:1px solid;
  }
  .element
  {
      width:100%;
      float:left
  }
  .element a
  {
      width:auto;
      padding:10px;
      border-bottom:1px solid;
      text-align:center;
      display:block;
  }
  </code></pre>
  
  <p>The structure would be the full div and margins on left and right but the div itself with borders has to fill the other part of the page</p>
  
  <p>Here is the example: <a href="http://jsfiddle.net/6nSEj/445/" rel="nofollow">jsfiddle</a></p>