Question

I have a 3 column layout using table-less design.

<div id="main">

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

</div>

The 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;}

I am using a web application, and I can’t change the layout. By can’t change, I mean the div’s with left/content/right cannot be removed.

On some pages, both the left and right columns are completely empty. And I want the #content div to expand more than the 600px.

is this possible, without altering the HTML? What are my options?

Thanks allot!

Answer 1

I’m not sure about doing this with pure CSS, but since jquery was tagged in the question I’ll assume that its fair game.

Take the following for example. What we’re doing here is checking to see if the #left or #right divs are empty. If so, we increase the #content div’s width respectively.

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

This script can probably be improved upon, as its counting on the idea that an empty div will have a height of zero. I thought about using the :empty psuedo selector, but this will fail if there is any white space inside the div.