Overlapping Divisions with CSS

[Dennis Marks]

I have a page that has a division with three buttons. Immediately below
it are three divisions that occupy the same positions. Two are hidden
and one is visible. They are switched between with the buttons. This
all works fine.

My question is. I am using "left: 0px; top: 45px;" on all 3 to put them
in the same positions. The problem is that if the page is made narrower
the buttons occupy move space making it's division taller which
overlaps the 3 divisions. It there a way to make the 3 divisions move
up and down with the size of the button division.

If I leave out "top" they do not overlap.

You can see the page at my site. Just select Amtrak Train Routes.

 

[Foofy (formerly known as Spaghetti)]

You can see the page at my site. Just select Amtrak Train Routes.

I can't find the page in question? And I'm not sure what the question is.

 

[Richard]

I have a page that has a division with three buttons. Immediately below
it are three divisions that occupy the same positions. Two are hidden
and one is visible. They are switched between with the buttons. This
all works fine.

My question is. I am using "left: 0px; top: 45px;" on all 3 to put them
in the same positions. The problem is that if the page is made narrower
the buttons occupy move space making it's division taller which
overlaps the 3 divisions. It there a way to make the 3 divisions move
up and down with the size of the button division.

If I leave out "top" they do not overlap.

You can see the page at my site. Just select Amtrak Train Routes.

Learn how to apply z-index.
Multiple divisions occupy the same physical space.
Instead of opening a new page for a small change, z-index allows the swap to
be made on the same page.
Somewhat similar to an image swap.

 

[Dennis Marks]

Learn how to apply z-index.
Multiple divisions occupy the same physical space.
Instead of opening a new page for a small change, z-index allows the swap to
be made on the same page.
Somewhat similar to an image swap.

As I have said the division swap works. What I want to know is if there
is a way to have multiple divisions occupying the same space without
using an absolute position with left and top (which is what I do). I
would like all three divisions to move as a unit when divisions above
push them down.

 

[Mitja]

As I have said the division swap works. What I want to know is if
there is a way to have multiple divisions occupying the same space
without using an absolute position with left and top (which is what I
do). I would like all three divisions to move as a unit when
divisions above push them down.

Not that I know.
Try doing it like this: the DIV to be displayed has display:block set, the
other two display:none. This way, they won't be even hidden - they simply
won't be there, neither to see, nor to take up space.