CSS: Two inline DIV-elements, one with fixed width, the other fills the rest of the screen

Question

I have two DIV-elements, which I want to position next to each other (inline). The first element is a menu (left), and the second element is the content (right). The menu should have a fixed width of 100px, while the content should fill the rest of the screen (100%).

The css:

menu {float:left; width:100px;}
content {float:left; width:100%}

This displays content as a block element under the menu, and it's supposed to be next to it instead.

How should I tackle this?

I hope to make my site more mobile-friendly with this.

Answer 1

use javascript to set the second div to fill the remaining screen

Answer 2

I have a project in playground that may be what you mean.