CSS relative top and fixed bottom?

[draigGoch]

Hi,
I would very grateful to anyone who could help me out with a problem that seems to haunt me again and again!

I am designing a website which very simplistically is like this:

<div id="header">
<ul>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>

I did have the css of the content with:
position: absolute;
top: 110px;
bottom: 110px;
But, the problem is that the height of the header can vary depending on text size......
Is there any way that I could have something like:

position: relative;
top: 0px;
position: absolute;
bottom: 0px;

Help!!!!!!!

A computer always does what you tell it to, but rarely does what you want it to.....

 

[johnwm]

If you want one div to follow below another, no markup is required. <div> is a block level element, so one div will automatically be below the previous one.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[draigGoch]

Hi johnwm, thanks for the reply....

I don't think I explained clearly enough, I want the second div to stretch to fill the gap between the header and footer..... without css, it doesn't stretch to fill the gap. Only uses the space that the div needs!

Aaarggh!
This is hard to explain.....
But if you had a html table with 3 rows and the table height was set to 100%, you could dynamically change the height of row 1 and 3 and row 2 will fill the rest of the table with no gaps or overlap.
Am i making sense or gibbering away like a loon? Surely this is do-able somehow?

A computer always does what you tell it to, but rarely does what you want it to.....

 

[vacunita]

So what happens when the content is more than can fit in the space available? A table would push down the bottom row, to accommodate the content ignoring the height limitation if it needs more space. The bottom row would not be fixed.


If you simply want the footer to start where the content ends, don't fix the footer.

Divs stack up on each other with no space other than margins and padding, if any are specified.

If you want to have your content not shrink beyond a certain point, you can use min-height to limit that, but still allowing for the content to grow


For instance:

#header{
height:30%;
}

#content{
min-height: 50%;
}


#footer{
height:20%;
}
...
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

This would make your content start out at 70% of its parent, in this case the view port, but be able to grow as needed. While the header and footer maintain their heights relative to the view port.






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[draigGoch]

Thanks vacunita,

but I don't think I'm clear here, the problem is that I don't know what the height of my header will be, as it is dynamic, and I want the content to fill the gap between the header and the footer div (which is positioned absolute at the bottom of the screen).

A computer always does what you tell it to, but rarely does what you want it to.....

 

[vacunita]

But why absolutely position the footer? Does it really need to be absolutely positioned? What happens when the content, and the header are bigger than the space available? Should it scroll behind the footer while the footer remains in its position? Should the footer be at the end of the content and header?

If you fix the footer, it no longer interacts with anything in the page so there's no way for other elements to have any reference to it.

Now Divs work in one of 2 ways. Either they grow to accommodate their content, or they have specific dimensions.
When they grow, they push any elements under them down as they expand. If an element is positioned absolutely, it won't be pushed it will remain in its place, and the growing div will either appear under it or over it depending on the z-index. Default is to move under it.

Unlike tables they do not and can not calculate automatically how much space there is and grow to fit it. They just don't work that way.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[draigGoch]

The example i gave was a very simplified problem i had, where i had a div panel in the middle of the screen, and this div had overflow:auto; so it would scroll, so I needed the height of the box.

The footer wasn't absolute position it used negative margins to appear on the bottom of the window or page whichever is the greatest

I know that this layout isn't ideal by far - I asked the designers if the panel could have a min-height attribute as opposed to a set height, but no go!

I managed to pull it off with javascript/jquery in the end...... using min-height as default, and then changing the css if needed depending on window size!

A computer always does what you tell it to, but rarely does what you want it to.....

 

[draigGoch]

Thanks for your help guys.

A computer always does what you tell it to, but rarely does what you want it to.....