Forums | MacLife

resedit · 2009-01-04 2:26 pm

Code:

div.navigation {
   position: absolute;
   top: 80px;
   left: 0px;
   width: 200px;
   }
   
div.content {
   position: absolute;
   top: 80px;
   left: 200px;
   }
   
div.header {
   position: absolute;
   width: 100%
   height:80px;
   top:0px;
   left: 0px;
   }
   
div.footer {
   clear: both;
   width: 100%;
   }

The first three div's do what they are suppose to do.
The fourth div, the footer, is ending up at the top of the page. I'm guessing it has something to do with the absolute placement of the other three div's. So I tried putting the content for the other three div's inside a bigger div that does nothing stylewise, but the footer div still floats to the top, so I'm guessing the absolutes in the three div's makes their actual size meaningless to the container div they are in.

How can I make the footer appear below the navigation and content div ??
Can I specify the container div has a height of 100% minus height of the footer div, or something similar?

I tried -

Code:

<div id="container" style="height: 95%;">

for the dive around the three w/ absolutes, it moved the footer down a few pixels but not much.

resedit · 2009-01-04 3:21 pm

This seems to work:

Code:

div.navigation {
   position: absolute;
   top: 80px;
   left: 0px;
   width: 200px;
   }
   
div.content {
/*   position: absolute;
   top: 80px;
   left: 200px;
   */
   margin-top: 80px;
   margin-left: 200px;
   }
   
div.header {
   position: absolute;
   width: 100%
   height:80px;
   top:0px;
   left: 0px;
   }
   
div.footer {
   clear: both;
   width: 100%;
   }

as long as the content has more height than the side navigation, which it always will.

Booksley · 2009-01-04 3:46 pm

When you making something absolutely positioned, it is ignored when any other elements are flowed. By getting of the position absolute, you are bringing the content div back into the normal flow of the page, and so the footer will be put below it.

resedit · 2009-01-04 8:24 pm

Just out of curiosity - is there a way to absolutely position something without making it invisible to other elements?
I know there is in other software that deals with floats (IE LaTeX) and separates formatting from content.

Sounds like a major lack of CSS functionality if you have to hack around it.

The whole reason I wanted to do this was so that I could have the content div first in text and the header, footer last in the text file - so engines that rank according to how soon search terms appear would get it right.

Last edited by resedit (2009-01-04 8:27 pm)

Forums | MacLife

#1 2009-01-04 2:26 pm

div's are kicking my rear again

Code:

Code:

#2 2009-01-04 3:21 pm

Re: div's are kicking my rear again

Code:

#3 2009-01-04 3:46 pm

Re: div's are kicking my rear again

#4 2009-01-04 8:24 pm

Re: div's are kicking my rear again

Board footer