Issue with css footer

CSS, footer

[jonnyd8]

Hi There,

Ok I have a site I am developing. The test page looks great apart from the footer.

Im using css and php includes.

My top header is fine. This is the code I am using from the LEFT column, the CENTER content bit and the RIGHT column then the FOOTER.

Can anyone work out what is wrong? any help would be much appreciated

#leftcontent {
position: absolute;
left:0px;
width:200px;
background:#fff;
}

#centercontent {
position:absolute
background:#000000;
height:95%
margin-left: 201px;
margin-right:210px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
}

#rightcontent {
position: absolute;
right:0px;
width:200px;
background:#fff;
top:104px;
float: right;
}

#footer {
position: relative;
clear:both;
background:#fff;
}

[edited by: encyclo at 2:27 pm (utc) on Jan. 18, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]

[Setek]

Hiya, please remember you're not allowed to drop URIs like that - please see the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

As to your problem: Your entire website (barring the footer) is positioned absolutely. This means you are taking your left content, your centre content, and your right content, and taking them out of the document flow. Where these elements are placed, or how much space they take up, has absolutely no bearing on another element on your page.

Your footer is positioned relatively, which means "set this up as the container by which my absolutely positioned children can inherit my starting x and y co-ordinates as 0, 0."

As you can see, this would not work. In order for

clear: both;

to actually work, there need to be floats somewhere in the vicinity, that the element you're asking for needs to clear. This will not work with absolute positioning.

What you can do is go through the painstaking task of making your left, centre and right contents work by method of float, or you could absolutely position your footer also - and setting

bottom: 0;

to it so it always sits at the bottom, while having a bottom margin applied to the left, centre and right contents that may sit flush against the footer (set the bottom margin to the exact height that the footer would take up, so it should never overlap.)

Hope that helps :)

[jonnyd8]

hi,

thanks for that will give it a whirl later.

I'm sorry about the url I just wanted someone to see the problem its not for traffic. won't do it again thanks!

[Setek]

I'm sorry about the url I just wanted someone to see the problem its not for traffic. won't do it again thanks!

Heheheh it's cool :) Problem is, if people just posted URIs and we looked at it, helped you fix your problem, later on if somebody searches through these forums (I find searching on Google for things like "css float clear" turns up a lot of Webmaster World forum posts,) looking for the same problem, then looks at your website to find that there's no problem there at all, or the website's not even there anymore, then there's no adequate description of what the problem is.

Your posting of code was enough - I never clicked on your website link :)

[mep00]

There's an article at positioniseverything.net about this called "In Search of the One True Layout." But to more directly answer your question:

What you can do is go through the painstaking task of making your left, centre and right contents work by method of float,

It's actually not that hard once you know the technique.

or you could absolutely position your footer also - and setting bottom: 0; to it so it always sits at the bottom,

The problem with this is that you need to know how tall the columns will be. What happens if you add more content or the user changes the font size? Since floats take up space, they'll be able to grow or shrink as needed while always pushing the footer to where you need it.

Assuming the structure is as follows:

<div id="header"></div>
<div id="content">
 <div id="centercontent"></div>
 <div id="leftcontent"></div>
 <div id="rightcontent"></div>
</div>
<div id="footer"></div>

The following css should work:

#content {
overflow : hidden;
}
#leftcontent, #centercontent, #rightcontent {
margin-bottom : -10000px;
padding-bottom : 10000px;
}
#leftcontent {
float : left;
width:200px;
background:#fff;
margin-left : -401px;
}
#centercontent {
float : left;
background:#000000;
margin-right : 201px;
margin-left: 201px;
}
#rightcontent {
float : right;
width:200px;
margin-left : -200px; /* I don't remember if this line is needed or correct */
background:#fff;
}
#footer {
clear:both;
background:#fff;
} 

For more details I recommend seeing the article mentioned above.

[Setek]

It's actually not that hard once you know the technique.

I never said it was hard, what I was saying is converting an entirely absolutely positioned layout to a floated layout is painstaking (you could also call it tiresome, boring, annoying to have to redo all your work.)

As for the way you've outlined the floats to work... it can be done easier than that.

You could just use the parent container to clear the floats, instead of setting

overflow: hidden;

and then you wouldn't have to bother doing all that work with negative margins and positive padding.

[edit]

I'm tired, and can't be bothered arguing, actually... rest of this reply is stripped.

[/edit]

[edited by: Setek at 5:05 pm (utc) on Jan. 19, 2007]

[mep00]

You could just use the parent container to clear the floats, instead of setting overflow: hidden; and then you wouldn't have to bother doing all that work with negative margins and positive padding.

It's the combination of the negative margin, padding and overflow which allows all the columns to stretch to the bottom of their container. Otherwise, their backgrounds would end where their contents end.