Question

I have 2 divs that are side by side. They are both closable via jquery. When they are both visible, they have a fixed width, but when one is closed, I want the remaining div to expand to eat up the width that the closed div used to take up. Is there a way to do this using just CSS (aside from the close button), or do I have to resort to javascript?

Answer 1

The only method I could see for solving this with CSS would be to add classes to the containing element:

<div id="container" class="left|right|both">
    <div class="left"></div>
    <div class="right"></div>
</div>

Style the contents depending on what the parent class is. If left is the class, you give the first div a non-restricted width and hide the second div. The same goes for right and the second div. When the parent is both, you give both divs 50%.

All your JavaScript would need to do is handle which class is currently applied to the container.