title: Child element extends past container element
body: <p>All I want is to have the button in the second box displayed as a block element so that it expands to fill the container -- but when I set the button element to display:block -- it overflows the container (parent), see the following:</p>
  
  <p><a href="http://jsfiddle.net/MgcDU/7747/" rel="noreferrer">http://jsfiddle.net/MgcDU/7747/</a></p>
  
  <p>Any ideas?  What am I missing?</p>
  
  <p>My CSS:</p>
  
  <pre><code>a:link { color:#0040FF;text-decoration:none; }
  a:visited { color:#0040FF; }
  a:hover { background-color:#82B6EA;color:#FFFFFF;text-decoration:none; }
  a:active { color:#0040FF; }
  
  body { color:black;font-style:normal;font-size:10pt;font-family:Arial, Helvetica, sans-serif;padding:0;margin:0; }
  
  .body_1 { margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px; }
  
  .grid_1 { margin:8px 0 0 0;padding:0;overflow:hidden; }
  .grid_1_left { float:left;width:240px;margin:0;padding:0; }
  .grid_1_right { margin:0 0 0 245px;padding:0 0 0 8px; }
  .grid_1_right_bld { margin:0 0 0 245px;padding:0 0 0 8px;border-left:2px #AAAAAA dotted; }
  
  .btn, a.btn
  {
  background-color:#D3D7D7;color:#333333;display:inline-block;padding:6px 12px;margin-bottom:0;text-align:center;white-space:nowrap;vertical-align:middle;
  cursor:pointer;border:1px solid transparent;border-color:#D3D7D7;
  -webkit-transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
  -moz-transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
  transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
  }
  .btn:hover,
  .btn:focus,
  .btn:active { background-color:#AEB1B1;color:#333333;border-color:#AEB1B1;text-decoration:none;outline:0; }
  
  .btn_success, a.btn_success { color:#FFFFFF;border-color:#64b92a;background-color:#64b92a; }
  .btn_success:hover,
  .btn_success:focus,
  .btn_success:active { color:#FFFFFF;border-color: #50a118;background-color:#50a118; }
  
  .btn_lg { padding:8px 14px;font-size:12pt; }
  
  .btn_block { display:block;margin:0;padding:0;width:100%; }
  
  .box_1 { border:1px solid #5C6666;margin:0; }
  .box_1_body { background-color:#FFFFFF;border-top:1px solid #5C6666;margin:0;padding:6px; }
  .box_1_title { background-color:#5C6666;color:#FFFFFF;margin:0;padding:6px;text-align:center; }
  </code></pre>
  
  <p><strong>My HTML</strong></p>
  
  <pre><code>    &lt;div class="body_1"&gt;
       &lt;div class="grid_1"&gt;
        &lt;div class="grid_1_left"&gt;
  
          &lt;div class="box_1"&gt;
          &lt;div class="box_1_title"&gt;Box 1&lt;/div&gt;
          &lt;div class="box_1_body"&gt;
           &lt;a href="#" class="btn btn_success"&gt;Stays in the Box&lt;/a&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         &lt;br&gt;
         &lt;div class="box_1"&gt;
          &lt;div class="box_1_title"&gt;Box 2&lt;/div&gt;
          &lt;div class="box_1_body"&gt;
           &lt;a href="#" class="btn btn_success btn_block"&gt;Does NOT stay in the Box&lt;/a&gt;
          &lt;/div&gt;
         &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="grid_1_right"&gt;
          main body content
  &lt;br&gt;
            &lt;a href="#" class="btn btn_success"&gt;Btn 1&lt;/a&gt; 
  &lt;a href="#" class="btn btn_success"&gt;Btn 2&lt;/a&gt;
  &lt;br&gt;&lt;br&gt;
  Note how the buttons can align without being stacked (ie: inline-block) must remain in .btn selector class
        &lt;/div&gt;
  
       &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>