I am very new to CSS and am trying to set up 2 divs in the same space
on the page. The idea is that div1 will be an informational message
only displayed sometimes. When there isn't a message to be put there,
then div1 will be hidden and div2 content will be visible. The problem
I am having with this is that the content is still lining up right
beneath each other. If I make div1 hidden, then there is just white
space where it used to be.
Please help me understand what I'm doing wrong and how to make it do
this. If I'm completely off track, please let me know.
Kalvin
**code starts here **
<table width="200" height="100%" border="0" cellpadding="0"
cellspacing="5">
<tr>
<td>
<div id="div1" style="position:relative; top:0; left:0;
float:none; z-index:10;">
The admin lunch room will be closed on Friday
</div>
<div id="div2"
style="position:relative; top:0; left:0; float: none; z-index:1; ">
Secondary Story </div>
</td>
</tr>
<tr>
<td height="190">
<div id="Weather" style="position:relative; width:175px;
z-index:1; height: 195px; overflow: hidden;">
Weather goes here!
</div>
</td>
</tr>
</table>