title: How to adjust a floated element's position?
body: <p>I have a <code>ul</code> wrapped in a <code>.box</code>. I have set the bottom border for the <code>.box</code>. The <code>ul</code> items also have bottom border, I want the <code>li</code> border to place over the <code>.box</code> border so that the <code>.box</code> border is no more visible. I'm trying to do that by setting <code>margin-bottom: -1px</code> but doesn't work.</p>
  
  <p>Please see attached image:</p>
  
  <p><img src="https://i.stack.imgur.com/VR0tB.png" alt="enter image description here"></p>
  
  <p>Here's what I'm trying:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;ul&gt;
          &lt;li&gt;Hello&lt;/li&gt;
           &lt;li&gt;World&lt;/li&gt;
      &lt;/ul&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.box{
      border-bottom: 1px solid blue;
      overflow: hidden;   
  }
  
  ul{
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  ul li{
      float: left;
      background: green;
      border: 1px solid red;
  }
  </code></pre>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/b9H2j/" rel="nofollow noreferrer">http://jsfiddle.net/b9H2j/</a></p>