Absolute & Relative divs

Can't float a div after absolute positioned one

[RossWal]

I have several divs on a page. The bulk of the page consists of 3 layers that each get hidden and displayed, essentially making one page look like 3. I would like to follow those with another div that always displays. Unfortunately, I'm having trouble getting that to display correctly. The page looks like this:

¦ Div One  ¦
¦ Div Two  ¦  
¦ Div Three A ¦
¦ Div Three B ¦
¦ Div Three C ¦
¦ Div Four  ¦

Div Three A,B,C occupy the same position, but only one is displayed at a time. My problem is getting Div 4 to position after Three A, B, C. As soon as I added Div Three B into the mix, necessitating making Three A & B Absolute, Div Four decided it wanted to go to the top of the page.

I could include Div Four's content in Div Three A, B, and C, but I'd like to know whether this can be made to work more cleanly.

Any thoughts appreciated. As always thanks for the effort.

[mivox]

I ran into a similar problem on a site I designed... I wanted the 'middle' div to be able to vary in height, but have the bottom 'footer' div always sit obediently at the bottom of the page...

I ended up putting the footer in an external file, and adding an SSI 'include file' call to the end of the 'middle' div.

I'd love to hear of a solution that doesn't use SSI though... anyone?

[papabaer]

Here is something to always keep in mind when working with {position:absolute;}, the element no longer factors into the normal page flow.

In your example if 3A,3B, & 3C are placed using position:absolute, then DIV 4 takes it position in relationship to the nearest previous element still in normal page flow. In your example that would be DIV 2.

For all practical purposes just imagine a gap, or margin between the bottom of DIV 2 and the top of DIV 4 that is equivalent to the rendered space of DIVs 3A,3B,3C.

There are a number of ways to approach this, the appropriate method depends on your positioning of the preceding divs.

[piskie]

just a thought but if the divs are all absolute position, have you tried

¦ Div One ¦
¦ Div Two ¦
¦ Div Three ¦
¦ Div Four A ¦
¦ Div Four B ¦
¦ Div Four C ¦

Div Three is actualy Div 4 promoted in running order.
Also ensure Z index are in sequence.