title: Extending a div border outside wrap?
body: <p><a href="http://www.kerrymkt.com" rel="nofollow">Here is my site</a></p>
  
  <p>Currently still fiddling around with design layout and there is one problem I can't quite solve.
  On my header I have a red border-bottom to separate it from the main content. Likewise, on the footer I have a red top-border to do the same. Is there a way of extending the borders beyond the div (and consequently outside of the wrapper, with overflow visible) without it conflicting with the other elements? I want to configure the layout so it has more of a grid-like design.</p>
  
  <pre><code>#wrap {
  width: 1000px;
  background-color: #ffffff;
  text-align:left;
  margin: 0 auto 0 auto;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000; }
  
  #head{
  background-color: #ffffff;
  width: 1000px;
  height: 159px;
  border-bottom: 1px solid #ff0000; }
  </code></pre>
  
  <p>kind of like <a href="http://www.kerrymkt.com/wp-content/uploads/2012/08/Screen-shot-2012-08-10-at-13.53.00.png" rel="nofollow">this</a>? </p>