Question

I have a simple two column layout with fixed widths.

<div id='box'>
    <div id='ontop'>Ontop</div>
    <div id='column1'>Column1</div>
    <div id='column2'>Column1</div>
</div>

The CSS:

#box { width: 20em; }
#column1 {width: 12em;}
#column2 {float: left; width: 8em;}

I would like to have column1 expand to “100%” if column2 is empty or doesn’t exist.

Is it possible to do this just with CSS and without Javascript?

edit: changed #column1 width. example had an error, added div ontop.

Answer 1

This is actually easier if your elements are in the reverse order.

<div id='box'>
    <div id='column2'></div>
    <div id='column1'></div>
</div>

#column2 + #column1 { width: 10em }

If they must stay in the order you specified, then using the table display properties will do it (without #column1 flowing around #column2 when #column2 is shorter):

#box { width: 20em; display: table }
#column1, #column2 { display: table-cell }
#column2 { width: 8em; } /* you'll want to add some margin/padding here */

Note that these solutions only cover the case of #column2 not being there. If you want to see if an element is empty (or not empty), you’ll want to use the :empty pseudo class chained with :not: #column2:not(:empty) (this might not be the exact syntax).

Edit: other options can include looking to see if #column1 is an only child (#column1:only-child) or first/last child when it should be the last/first child (#column1:first-child/#column1:last-child).