Empty divs collapse rather than retain their sizes

[vouzamo]

Hi,

I have a page which contains 3 div containers side by side. Within those divs are sub-divs which can be moved, using DOM, between the containers. However, when a container div has no children it collapses rather than retaining it's percentage width and height.

The page can be found here: http://www.vouzamo.co.uk/display.asp

Try using the panels checkboxes to hide the News div... on hiding, the center div container will collapse and the right panels will move across to the left.

Container CSS:

#left
{
float: left;
width: 25%;
_width: 24%;
}
#center
{
float: left;
width: 50%;
_width: 49%;
}
#right
{
float: left;
width: 25%;
_width: 24%;
}


Container HTML:

<div id="center">
<div id="news" class="panel" style="display: block;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="news_tl" class="tl">
<img src="images/spacer.png" alt="spacer">
</td>
<td id="news_tc" class="tc">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="30" class="tc_title" align="left" valign="middle">
News
</td>
<td width="20" height="30" style="cursor: pointer; padding-left: 2px; padding-right: 2px;" align="center" valign="middle">
<img src="images/icons/arrow_up.png" alt="icon: arrow_up" onClick="moveUp('news');" align="middle">
</td>
<td width="20" height="30" style="cursor: pointer; padding-left: 2px; padding-right: 2px;" align="center" valign="middle">
<img src="images/icons/arrow_down.png" alt="icon: arrow_down" onClick="moveDown('news');" align="middle">
</td>
<td width="20" height="30" style="cursor: pointer; padding-left: 2px; padding-right: 2px;" align="center" valign="middle">
<img src="images/icons/arrow_left.png" alt="icon: arrow_left" onClick="moveLeft('news');" align="middle">
</td>
<td width="20" height="30" style="cursor: pointer; padding-left: 2px; padding-right: 2px;" align="center" valign="middle">
<img src="images/icons/arrow_right.png" alt="icon: arrow_right" onClick="moveRight('news');" align="middle">
</td>
<td width="20" height="30" style="cursor: pointer; padding-left: 2px; padding-right: 2px;" align="center" valign="middle">
<img src="images/icons/cog_edit.png" alt="icon: cog_edit" onClick="document.getElementById('news_mc').style.display = 'none'; document.getElementById('news_mc_configure').style.display = 'block';" align="middle">
</td>
<td width="20" height="30" style="cursor: pointer; padding-left: 2px; padding-right: 2px;" align="center" valign="middle">
<img src="images/icons/delete.png" alt="icon: delete" onClick="remove('news','News');" align="middle">
</td>
</tr>
</table>
</td>
<td id="news_tr" class="tr">
<img src="images/spacer.png" alt="spacer">
</td>
</tr>
<tr>
<td id="news_ml" class="ml">
<img src="images/spacer.png" alt="spacer">
</td>
<td id="news_mc" class="mc" style="display: block;">
content
</td>
<td id="news_mc_configure" class="mc" style="display: none;">
configuration
</td>
<td id="news_mr" class="mr">
<img src="images/spacer.png" alt="spacer">
</td>
</tr>
<tr>
<td id="news_bl" class="bl">

<img src="images/spacer.png" alt="spacer">
</td>
<td id="news_bc" class="bc">
</td>
<td id="news_br" class="br">
<img src="images/spacer.png" alt="spacer">
</td>
</tr>
</table>
</div>
</div>

[Centauri]

You haven't got any height (% or otherwise) set on those divs, so they will always be only the height of their content. A % height wouldn't be any use anyway, due to no specific height being set on the container (the body in this case), and would not allow expansion. However, you could set a minimum height on the divs without any problems.

[vouzamo]

Thank you for your response. Minimum height sounds promising. Would I need to implement this for the containers, the sub-divs, or both? Additionally, is the correct declaration...

min-height: 5px; for example?

Kind regards,

John Askew

[vouzamo]

Just applied min-height to the containers and that worked. Thank you very much for your help.