Problema com largura

[Prove Yourself 0]

Tenho uma div (#controls) que flutua a esquerda. Teoricamente ela deveria sair do fluxo do documento e o próximo elemento deveria ficar no mesmo lugar dessa div. Acontece que a div (#player) que envolve esta div não aumenta o seu espaço para receber a outra div do lado (#information). Preciso colocar um width na div (#player) para funcionar. Não quero definir ele e nem com width: auto funciona.

HTML:

<div id="player">
   <div id="controls">
       <button id="play" type="button"></button>
       <button id="rewind" type="button"></button>
       <button id="stop" type="button"></button>
       <button id="forward" type="button"></button>
   </div>
   <div id="information">
       <img src="album.jpg" alt="Album" />
       <p><span class="label">Artista:</span> Foo Bar Foo</p>
       <p><span class="label">Música:</span> Foo matic joe</p>
       <p><span class="label">Álbum:</span> Foo consequence lorem</p>
   </div>
   <ul id="playlist">
       <li>
           <img src="album.jpg" width="32" height="32" alt="Album" />
           <p>Nome da música</p>
           <div class="musicinformation">
               <img src="download.png" alt="Download" title="Baixar esta música" />
               <img src="license.png" alt="Licença" />
           </div>
       </li>
   </ul>
</div>

CSS:

div#player {
   border: 1px solid;
   margin-left: 5px;
}

div#player div#controls {
   background: #00a0b0;
   float: left;
   padding: 5px;
   -moz-border-radius: 10px 10px 0 0;
   -webkit-border-radius: 10px 10px 0 0;
}

div#player button {
   border: none;
   height: 50px;
   width: 50px;
}

div#player button#play {
   background: url(play.png) no-repeat;
   height: 64px;
   width: 64px;
}

div#player button#rewind {
   background: url(rewind.png) no-repeat;
}

div#player button#stop {
   background: url(stop.png) no-repeat;
}

div#player button#forward {
   background: url(forward.png) no-repeat;
}

div#player div#information {
   background: #fff;
   border: 1px solid;
   overflow: hidden;
   padding: 5px;
}

div#player div#information img {
   border: 1px solid;
   float: left;
   margin-right: 15px;
}

div#player div#information p {
   border: 1px solid;
   font-size: 14px;
   margin: 3px 0;
}

div#player div#information p span.label {
   font-weight: bold;
}

div#player ul#playlist {
   background: #00a0b0;
   border-top: 3px solid #00a0b0;
   border-bottom: 3px solid #00a0b0;
   height: 250px;
   overflow: auto;
   padding: 0 3px;
}

div#player ul#playlist li {
   background: #f5feff;
   margin: 3px 0;
   font-size: 12px;
   overflow: auto;
   padding: 5px;
}

div#player ul#playlist li:hover {
   background: #e9fdff;
}

div#player ul#playlist li img {
   float: left;
   margin-right: 10px;
}

div#player ul#playlist li p {
   margin-top: 10px;
}

div#player ul#playlist li div.musicinformation {
   float: right;
}

div#player ul#playlist li div.musicinformation img {
   margin: 0 3px;
}

 

Uma imagem http://img524.imageshack.us/img524/5982/playerqs.jpg .

 

Valeu.

[Evandro Oliveira 331]

#controls flutua à esquerda, enquanto #information flutua à direita.

 

Não se esqueça que o contêiner pai (#player) deve fornecer largura suficiente para que os elementos se acomodem lateralmente.