title: why is span element not working with this piece of code
body: <p>I have a navigation menu which looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/2UoJc.jpg" alt="enter image description here"></p>
  
  <p>I have to split it into three parts (left, center, right).</p>
  
  <p>I have written the html and css code like this:</p>
  
  <pre><code>&lt;span id="nav-left-img"&gt;&lt;/span&gt;
      &lt;ul id="navigation"&gt;
          &lt;li&gt;Home&lt;/li&gt;
          &lt;li&gt;About Us&lt;/li&gt;
          &lt;li&gt;Products&lt;/li&gt;
          &lt;li&gt;Contact Us&lt;/li&gt;
      &lt;/ul&gt;
  &lt;span id="nav-right-img"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>and here is the css:</p>
  
  <pre><code>ul#navigation
  {
      background: url('../img/menu-c.png') repeat-x;
      height: 45px;
      clear: both;
      width: 420px;
  }
  ul#navigation li
  {
      float: left;
      text-align: center;
      width: 100px;
      padding-top: 10px;
  }
  #nav-left-img
  {
      background: url('../img/menu-l.png') no-repeat;
      height: 45px;
      width: 10px;
  }
  </code></pre>
  
  <p>The <code>span</code> does not seems to do the trick; if I use a <code>div</code> it works. What is possibly wrong with the code? Is it ok if I use <code>div</code> instead of <code>span</code> or should I stick with <code>div</code> for joining that left and right image? How do I do it with <code>span</code>?</p>