Overlapping div is not overlapping

[Kalvin]

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>

[David Dorward]

Re: Overlapping div is not overlapping

Kalvin wrote:
[color=blue]
> I am very new to CSS and am trying to set up 2 divs in the same space
> on the page.[/color]

You are using position: relative - which renders the page as normal, and
then sifts elements according to the left/right/top/bottom properties
without altering the flow.

You need absolute positioning to place two elements in the same spot, this
positions elements from the top/left/right/bottom edges of the containing
block (nearest ancestor element that is not position: static, or the
viewport if no such element exists).
[color=blue]
> The idea is that div1 will be an informational message
> only displayed sometimes.[/color]

So why not change the text instead? Preferably on the server so that it
won't fail if JavaScript or CSS is not available.
[color=blue]
> When there isn't a message to be put there,
> then div1 will be hidden and div2 content will be visible.[/color]

What you probably want to do then (if you don't go with my suggestion above
regarding altering the text), is to toggle the display property of the
element between the default and "none". This will remove it from normal
flow.
[color=blue]
> 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.[/color]

Invisible things still take up space.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Gus Richter]

Re: Overlapping div is not overlapping

Kalvin wrote:[color=blue]
> 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.[/color]

Inside the cell (are you sure you really want/need to use a table?),
place a Relatively positioned DIV containing the two messages in an
Absolutely positioned DIV each. Forget about z-index here; it is not
necessary. Don't use the display property, use the visibility property
instead. Allow the initial one to have the default of 'visible' and the
secondary one to have "visibility:hid den;". Then apply a mechanism to
trigger the switch to make the initial div hidden and the secondary div
visible.

--
Gus