Ширины с фиксированной и переменной шириной (таблица или поплавок)?

Question

Я создаю 3 колонки, полная ширина страницы, но я хочу иметь 2 колонки фиксированной ширины, а другой будет соответствовать полной ширине между ними, например, так:

| Fixed Width || Variable Width    || Fixed Width  | 
| Always Left || Adapts To Browser Window Size || Always Fixed Right | 

Я попробовал его с поплавком, который не работал, а затем кто-то предложил использовать экранную таблицу, которая работала, пока мне не пришлось слегка редактировать страницу. Теперь правый столбец в порядке, но 2 левых столбца имеют контент справа внизу, а не наверху, где он должен быть. Кто-нибудь может помочь с этим. Вот код, который я использую:

.pageContent{ 
     background-color: #DADEE1; 
     width: 100%; 
     padding: 10px 0px 10px 0px; 
    } 
    .gridSystem{ 
     display: table; 
    } 
    section{ 
     display: table-cell; 
    } 
    .mainSidebar{ 
     float: left; 
     vertical-align: top; 
     width: 140px; 
    } 
    .mainPage{ 
     width: inherit; 
     overflow: hidden; 
     margin: 0px 0px 0px 0px; 
     padding: 20px; 
    } 
    .mainAdvert{ 
     float: right; 
     width: 140px; 
    } 

<div class="pageContent gridSystem"> 
    <section class="mainSidebar"></section> 
    <section class="mainPage"></section> 
    <section class="mainAdvert"></section> 
    <div class="clearBoth"></div> 
</div> 

Спасибо

Answer 1

Попробуйте это решение Jquery:

$(document).ready(function(){ 
    window_width = $(window).width; 
    mainPage_width = window_width - 140 - 140; 
    $(".mainPage").width = mainPage_width + "px";  
} 

http://jsfiddle.net/_rov/zBF3j/

Answer 2

Поскольку левая колонка (mainSidebar) фиксирована, вам знайте точку, где начинается столбец 2 (mainPage) ... затем используйте jQuery для установки ширины (или любого другого css) ... Согласовано с Rov - я не думаю, что CSS может учитывать различные экраны - поэтому лучше всего использовать jQuery/Javascript.