menu fixed na esquerda e conteudo float left?

[diasgabrie 0]

<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!

[Diogo Camargo 18]

Uma dica é evitar esses nomes de classes/id como left, right, top, bottom imagine se em algum momento você quiser que o está na esquerda fique a direita

 

Adicione "position relative" left 305px e quando fechar adicione um atributo style com left:0