title: html/css: white spaces/collapsed container in horizontal list
body: <p>I'm trying to create a horizontal menu for my webisite. It's not that difficult, but I'm running into two problems, which brake my design.</p>
  
  <p>I can do it in two ways:</p>
  
  <p>1). by setting </p>
  
  <pre><code>#menu li { 
  display: inline-block;
  }
  </code></pre>
  
  <p>like I did here: <a href="http://jsfiddle.net/l0ner/HPpgG/" rel="nofollow">http://jsfiddle.net/l0ner/HPpgG/</a>. </p>
  
  <p>It works and looks like I want but there is a white space between each element, which  breaks the design. I could remove the space by putting all list elements in one line, but it's not exactly an elegant solution.
  I know I could set the <code>&lt;ul&gt;</code> font size to 0, and then restore it in <code>&lt;li&gt;</code> but it feels too much like a dirty hack to me, and I'd like to keep the css 'magic' minimal.</p>
  
  <p>How do I remove those spaces?</p>
  
  <p>2). by setting</p>
  
  <pre><code>#menu li {
  display: block;
  float: left;
  }
  </code></pre>
  
  <p>Like I did here: <a href="http://jsfiddle.net/l0ner/HPpgG/1/" rel="nofollow">http://jsfiddle.net/l0ner/HPpgG/1/</a></p>
  
  <p>But like this the <code>&lt;div&gt;</code> container collapses and I loose the white background for the menu, which makes whole thing unreadable.</p>
  
  <p>How I can make the container uncollpased?</p>