html - flotante - posicionar div css
¿Cómo hacer div medio para llenar el espacio entre elementos flotantes? (2)
Tengo tres elementos div: izquierdo, medio y derecho. Izquierda y derecha son fijas y flotantes. Lo que quiero es el div medio para llenar el vacío entre ellos.
Este es mi 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>
¿Alguna idea sobre cómo hacer esto? Probé diferentes soluciones pero no logré hacer lo que quiero.
La clave es reestructurar su html para tener el último en el middle , eliminar el float del middle y reemplazarlo con un overflow: hidden .
HTML
<div id="left" > left </div>
<div id="right" > right </div>
<div id="middle"> middle </div>
CSS
#left {
width: 200px;
float: left;
}
#middle {
overflow: hidden;
}
#right {
width: 200px;
float: right;
}
Pude replicar el problema y solucionarlo utilizando porcentajes en lugar de valores absolutos. Ya que estás buscando algo flexible entre los dos elementos, esto debería funcionar.
#left {
width: 20%;
float: left;
background: #ccc;
}
#middle {
width: 60%;
float: left;
display: block;
background: #ddd;
}
#right {
width: 20%;
float: right;
background: #bbb;
}
Aquí hay una demo