Два div; слева должна быть фиксированная ширина, справа должна заполнять остальную часть пространства

У меня есть следующий код HTML:

<body> 
<div id="Frame">

    <div id="Body">
        <div id="Panel">Side panel, fixed width.</div>
        <div id="Content">The rest of the content, should be dynamic width and fill up rest of space horizontally.</div>
    </div>

    <div id="Foot">
        <div>FooBar.</div>
    </div>
</div>
</body>

То, что я пытаюсь сделать, это сделать так, чтобы #Panel имела фиксированную ширину (~ 200 пикселей) и с левой стороны и что #Content сразу справа от #Panel, но имеет значение "динамической" ширины и заполняет остальную часть пространства в экране браузера по горизонтали. Я пробовал много разных вещей, но не смог заставить его работать - самое дальнее, что я получил, до такой степени, что #Panel находится слева, а #Content находится справа от #Panel и заполняет остальной части пространства, но #Content начинается ниже #Panel, тогда как я хотел бы, чтобы он начинался в том же вертикальном положении.

Я нашел В CSS, как мне получить столбец с фиксированной шириной слева с правой таблицей, использующей остальную ширину?, однако я не смог применить его к HTML выше.

Ответ 1