title: DIV Between List Items
body: <p><strong>How can I place a div in between two list items, adding a margin on both sides?</strong></p>
  
  <p>Here is the layout I am trying to achieve: <a href="http://grab.by/fWPy" rel="nofollow">Link to Image</a></p>
  
  <p>Below is the code I am trying to use to make this happen.</p>
  
  <pre><code>&lt;div id="logo"&gt;
    Logo Image
  &lt;/div&gt;
  
  &lt;div id="navigation"&gt;
    &lt;ul&gt;
     &lt;li&gt;Item 1&lt;/li&gt;
     &lt;li&gt;Item 2&lt;/li&gt;
     &lt;li&gt;Item 3&lt;/li&gt;
     &lt;li&gt;Item 4&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to do this without adding individual styles to the 2nd and 3rd list items? That's the only way I can think of doing this.</p>