Forum Moderators: not2easy

Message Too Old, No Replies

Position 3 div blocks within one

Make the last div sticky to the bottom of the parent

         

BlackDex

11:38 am on Feb 2, 2006 (gmt 0)

10+ Year Member



Hello there,

I Have 4 div blocks.
1. Container of the 3 other blocks.
2. Header. (Has to be on the top of the container)
3. Middle. (Be in the middle between header and footer)
4. Footer. (Sticky on the bottom of the container, but should be able to grow in height(top))


[Container]
*----------------------------------*
¦*--------------------------------*¦
¦¦[Header]                        ¦¦
¦*--------------------------------*¦
¦*--------------------------------*¦
¦*--------------------------------*¦
¦¦[Middle]                        ¦¦
¦*--------------------------------*¦
¦                                  ¦
¦                                  ¦
¦*--------------------------------*¦
¦¦[Footer]                        ¦¦
¦*--------------------------------*¦
*----------------------------------*

I Have tryed several stuff, and im realy lost.
If someone has an example for me, or a place where it is the same way, then i could figure it out from there.

Don't wurry about IE etc.. if it works under FireFox and Opera it is good :).

Thx in advanced.

Schaltwert

1:15 pm on Feb 2, 2006 (gmt 0)



Hi BlackDex,

I have currently the same problem... but with IE 6 in standard mode!

I get it working in FF 1.0.4, NN 7.1 and Opera 8.5.
Here´s my solution. The header has a height of 84px and the footer of 67px. The height of the middle part varies upon the browsers´ window height:

<body style="margin:0px;padding:0px;height:100%;">
<div style="position:absolute;left:0px;top:0px; width:100%;height:84px;background-color:#FF0000;"></div>
<div style="position:absolute;left:0px;top:84px; width:100%;height:auto;background-color:#00FF00;bottom:67px;">
</div>
<div style="position:absolute;left:0px;bottom:0px; width:100%;height:67px;background-color:#0000FF;"></div>
</body>

Hope somebody can tell me how I can get this work in IE 6 (and 5.5)!

best regards,
Schaltwert

BlackDex

1:44 pm on Feb 2, 2006 (gmt 0)

10+ Year Member



Hello Schaltwert,

Well that is easy to fix (kinda).
I Use a script called IE7, which fixes alot of bugs in internet explorer 5.0-6.0.

Check: [dean.edwards.name...]

My problem is that my main container div is lets say 100px in height, and positioned at the top.
And i want my last div at the bottom of the main container that is only 100px in height.