Como fazer div central para preencher o espaço entre os elementos flutuantes?
Eu tenho três elementos div: esquerda, meio e direita. Esquerda e direita são fixas e flutuantes. O que eu quero é odiv médio para preencher a lacuna entre eles.
Este é o meu código:
<!DOCTYPE html>
<html>
<head>
<style>
* {border: dotted 1px red;}
#left {
width: 200px;
float: left;
}
#middle {
float: left;
}
#right {
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id="left" > left </div>
<div id="middle"> middle </div>
<div id="right" > right </div>
</body>
</html>
Algumas ideias em como fazer isso? Eu tentei soluções diferentes, mas não consegui fazer o que eu quero.