title: placing 3 divs next to each other in a div on undefined size
body: <p>i have a header, which takes the whole width of the screen. in my header i want to place 3 divs, which should be aligned next to each other. the div's on the side being fixed-width, and the middle should take the other space available. so i don't know the width of the header, and i don't know the width of the middle container.</p>
  
  <p>right now i have this code:
  html:</p>
  
  <pre><code>&lt;div id="header"&gt;
    &lt;div id="menu-container"&gt;
      menu goes here
    &lt;/div&gt;
    &lt;div id="logo-container"&gt;
      logo goes here
    &lt;/div&gt;
    &lt;div id="music-player-container"&gt;
      music player comes here
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>#header {
    height: 200px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  #menu-container {
    width: 400px;
    height: inherit;
    float: left;
  }
  
  #logo-container {
    height: 100%;
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    width: auto;
  }
  
  #music-player-container {
    width: 400px;
    height: inherit;
    float: left;
  }
  </code></pre>
  
  <p>which should be working according to other problems with the float.... it doesn't</p>