Llena el espacio de un div

Me gustaría que un elemento llene el espacio restante de un div principal. He logrado hacer esto, puedes verlo aquí “enlace eliminado” pero el relleno div (derecha) se encuentra debajo del div izquierdo. Básicamente quiero que el div correcto comience donde termina el div izquierdo.

Espero que esto tenga sentido.

    #left { float:left; width:180px; background-color:#ff0000; height:20px; } #right { width: 100%; background-color:#00FF00; height:30px; }    
Nav

En #right , simplemente elimine el width: 100% y agregue overflow: hidden .

Ver: http://jsfiddle.net/hJzJf/(supongo que su height s solo es para fines de prueba)

¿Por qué funciona esto?

Ver: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

Establecer margin-left: 180px; en el elemento #right. Esto lo compensará con el ancho del primer elemento.

http://jsfiddle.net/DHSej/