Проблема с CSS Floats

Question

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

Когда я задаю процент для ширины плавающего элемента div, предполагается, что я имею в виду 100% ширины содержащего элемента div. То, что я пытаюсь сделать, это установить ширину на остаток от ширины в текущем div. Если я использую таблицу, она будет работать. По сути, мне нужно иметь возможность взять следующий код для таблицы и заставить его работать, используя div ...

<table style="width: 100px;" cellpadding="0" cellspacing="0">
   <tr style="height: 25px;">
      <td style="width: 10px; background-color: Red;"></td>
      <td style="background-color: Blue;"></td>
      <td style="width: 10px; background-color: Black;"></td>
   </tr>
</table>

Показывает следующее:

Пока у меня есть следующее, но оно не работает так, как задумано ...

<div id="container" style="width: 100px; height: 25px;">
   <div id="left" style="float: left; width: 10px; background-color: Red; height: 100%;"></div>
   <div id="mid" style="float: left; background-color: Blue; height: 100%;"></div>
   <div id="right" style="float: right; width: 10px; background-color: Black; height: 100%;"></div>
</div>

Код выше показывает следующее:

В любом случае, если бы кто-то мог помочь мне перевести табличный метод во что-то, что будет работать с div, я был бы очень признателен.

Спасибо,
С * * тысяча двадцать-один

Замечания:

Я попытался добавить код в реальное сообщение, но похоже, что сообщение не интерпретирует HTML. Поэтому разделы, где написано «показывает следующее», на самом деле этого не делают.

Answer 1

По умолчанию div - это элементы уровня блока, поэтому вам не нужно указывать «display: block;».

Answer 2

Вы можете попробовать что-то вроде этого:

<div style="width:100px;height:25px;position:relative">
  <div style="width:20px;height:100%;position:absolute;background:red">&nbsp;</div>
  <div style="width:20px;height:100%;position:absolute;right:0;background:black">&nbsp;</div>
  <div style="height:100%;background:blue;padding:0 20px">
    Stuff
  </div>
</div>

Answer 3

Вы можете выполнить задачу с помощью поплавков и без абсолютного позиционирования.

<div id="container" style="display: block; width: 700px; height: 100px;">
    <div id="left" style="display: block; float: left; width: 10px; background-color: Red; height: 100%;">Div 1</div>
    <div id="mid" style="display: block; width: 90%; float: left; background-color: Blue; height: 100%;">Div 2</div>
    <div id="right" style="display: block; float: left; width: 10px; background-color: Green; height: 100%;">Div 3</div>
</div>

Что вам не хватало, так это тег display: block, который делает div похожим на элементы уровня блока, которые будут плавать так, как вы указали. Кроме того, поскольку вы не можете занять 100% родительского блока, я использовал 90%, и он дал результаты работы под Firefox, не уверенный в IE или Opera.

Предварительный просмотр показывает Div 1, Div 2, Div 3, но при публикации его не было

Редактировать: добавлен рабочий код.