Динамическая ширина третьего столбца в трехколоночной разметке

Question

Я работаю над макетом из трех столбцов:

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

Я хотел бы сделать так, чтобы первые два столбца имели фиксированную ширину, а третий столбец занимал остальное пространство на странице. Просто установить ширину в процентах для всех - вариант, но не предпочтительный.

Вариант, который я рассмотрел:

div#first {position: absolute; left: 0; top: 0; width: 150px;}
div#second {position: absolute; left: 150px; top: 0; width: 450px;}
div#third {margin-left: 600px}

Я использовал подобные вещи в прошлом, но с ограниченным успехом. А именно, я считаю, что если в #first или #second есть какие-либо плавающие элементы, очищенные элементы в #third также очистят элементы в #first и #second. Хотя работа без очистки возможна, я хотел бы, если возможно, ограничить ее.

Я понял, что моё желаемое поведение действительно может быть получено с помощью следующей схемы:

<table style="width: 100%">
  <tr>
    <td width=150"><div id="first"></div></td>
    <td width=450"><div id="second"></div></td>
    <td><div id="third"></div></td>
  </tr>
</table>

И хотя SEO на этом сайте не является проблемой, таблица с корневым узлом просто кажется неправильной.

Answer 1

Похоже, вы ищете что-то вроде этого:

CSS

<style type="text/css">
  #first,#second {
    float: left;
  }

  #first {
    width: 150px;
    border: 1px solid red;
  }

  #second {
    width: 450px;
    border: 1px solid green;
  }

  #third {
    width: auto;
    overflow: auto;
    border: 1px solid blue;
  }
</style>

HTML

<div id="first">Left</div>
<div id="second">Middle</div>
<div id="third">Right</div>

Answer 2

с небольшим javascript, его идеальным / сначала добавить jquery для селекторов и т. Д.

<script type="text/javascript" src="js/jquery.js"></script>

и часть JavaScript /

$(document).ready(function(){
    $('#third').css("width",$(window).width()-600)

    $(window).resize(function() {
        $('#third').css("width",$(window).width()-600)
    });
});