Problema com largura

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.