menu fixed na esquerda e conteudo float left?

<style>
body{

margin:0;
background-color:#f1f1f1;
}

#left{
 float:left;
 background-color:#fff;
 width:300px;
 height:100%;
}

#conteudo{
 float:left;
 background-color:navy;
 width:100px;
 height:1000px;
}

</style>

<div id=left>div fixa ao rolar.</div>
<div id=conteudo></div>

bom dia pessoal.

estou tentando deixar a div "left" como um menu fixo na esquerda e o conteudo ao lado desse menu. acontece que se eu por position fixed na div "left" o conteudo não mais fica ao seu lado.

do jeito que tá, quando rolar a página para baixo o menu "left" sobe junto. quero deixar ele fixed.

porém não quero por um margin-left: 300px no conteudo, pois quero, futuramente, fechar o menu "left" e, ao fechar, quero que o conteudo vá automaticamente para esquerda.

como posso deixar a div "left" fixa, com o conteudo ao lado sem usar margin-left:300?

obrigada!