Два 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

Вот эта ссылка, примененная к вашему коду:

CSS

#frame   { background:pink }
#panel   { background:orange; width:200px; float:left }
#content { background:khaki; margin-left:200px }
#foot    { background:cornflowerblue }

HTML

<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><!-- End #body -->

  <div id='foot'>
    <div>FooBar.</div>
  </div>

</div><!-- End #frame -->

Хорошо работает! Хотя, ИМХО, вам не нужна рамка или тело (но я не знаю генеральный план). Это будет выглядеть так:

<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 id='foot'>
  <div>FooBar.</div>
</div>