Question

I have a client which want a css tricky solution. They want the divs to have different widths on different occasions. Like on page 1 we have a leftnavigation, on page 2 we don’t. So the content containing divs should expand in width when the leftnavigation div is not there.

html

<div id="page">
    <div id="wrapper">
        <div class="leftnav"></div>
        <div class="contentColumnLeft"></div>
        <div class="contentColumnRight"></div>
    </div>
</div>

css

#page{width: 100%; height: 100%;}
#wrapper{margin: 0px auto; width: 960px;}
.leftnav{width: 110px; float: left;}
.contentColumnLeft{width: 500px; float: left;}
.contentColumnRight{width: 200px; float: left;}

When the .leftnav is not there (gets removed with jquery when page url contains parameters ?lnav=t) it leaves a wide gap open on the right side of the #wrapper div which I want to close.

Can this be solved CSS wise or is jquery a valid second option?

Answer 1

Use display: table; and display: table-cell;

#wrapper{display: table;}
.leftnavn{display: table-cell;}
.contentColumnLeft{display: table-cell;}
.contentColumnRight{display: table-cell;}

Then when the leftnav gets removed from inside the #wrapper, the others will always take up the remaining space.

Check out this demo to see it in action.

Click the .leftnavn div to see the other two divs take up the remaining space.