Divs interiores no toman el width

[goc00]

Bueno muchachos, tengo la siguiente estructura:

Código HTML:

<div id="cont">
    <div class="lado">partido 1</div>
    <div class="medio">v/s</div>
    <div class="lado">partido 2</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Lo que deseo, es que el div con el class "medio", quede precisamente al medio siempre, independiente del tamaño de los div class "lado", y para esto lo más cercano que he logrado es:

Código HTML:

#cont {
    width: 200px;
    background-color: #FF0000;
}
#cont div {
    display: inline;
}
#cont div.medio {
    width: 40px;
    background-color: #00FF00;
}
#cont div.lado {
    width: 80px;
    background-color: #0000FF;
}​

Pero como podrán ver, estos el width de estos divs no los toma, entonces me quedan con un width automático, del tamaño del contenido. Acá les muestro como se me ve: http://jsfiddle.net/PKqMT/5/

Necesito entonces, que estos 3 divs queden ocupando el espacio completo del contenedor, así, me cercioraría de que el div de al medio siempre esté al centro...