Tengo unos div de tal forma que cuando la ventana es grande, haya dos div flotantes opuestos y un div inline en el centro. Busco que al reducir la ventana, cuando el espacio entre los div flotantes sea menor que el tamaño del div central, este ultimo "resbale" hacia abajo, y los dos div flotantes se mantengan a la misma altura.
#left {
float: left;
}
#right {
float: right;
}
#left, #right {
width: 70px;
}
#center {
display: inline-block;
width: 500px;
}
#cartel {
text-align: center;
}
<div id="cartel">
<div id="left">Antes</div>
<div id="center">Lista</div>
<div id="right">Despues</div>
</div>
Pero no lo consigo, y en lugar de eso lo que resbala hacia abajo es el div derecho.
Cabe aclarar que el código no se ubica en el top de la pagina, sino que es antecedido por otros elementos.