Макет с 3 столбцами, средний столбец должен растягиваться шире, когда столбцы 1 и 3 пусты

Question

У меня есть 3 колонки, использующие дизайн без таблиц.

<div id="main">

  <div id="left"></div>
  <div id="content"></div>
  <div id="right"></div>

</div>

CSS:

#left {width: 200px;float:left;display:inline;}
#content {width: 600px;float:left;display:inline;padding: 0 10px;}
#right {width: 160px;float:left;display:inline;}

Я использую веб-приложение, и не могу изменить макет . Под изменением нельзя подразумевать, что элементы div с левым / содержимым / правым не могут быть удалены.

На некоторых страницах левый и правый столбцы полностью пусты. И я хочу, чтобы #content div расширился больше, чем на 600 пикселей.

возможно ли это без изменения HTML? Какие у меня варианты?

Спасибо, спасибо!

Answer 1

Я не уверен, что сделаю это с чистым CSS, но, поскольку jquery был помечен в вопросе, я буду считать его честной игрой.

Возьмем, к примеру, следующее. Здесь мы проверяем, являются ли div #left или #right пустыми. Если это так, мы увеличиваем ширину #content div соответственно.

$(document).ready(function(){
    if($('#left').height() == 0){
        $('#content').width( $('#content').width() + $('#left').width());
    }
    if($('#right').height() == 0){
        $('#content').width( $('#content').width() + $('#right').width());
    }           
});

Этот скрипт, вероятно, может быть улучшен, так как он рассчитывает на идею, что пустой div будет иметь высоту ноль. Я подумал об использовании селектора: empty psuedo, но это не удастся, если внутри div есть пробелы.