CSS Footer

[InfernalLV]

I need to make a footer. I want the footer to be in the middle column of a 3 column layout. I’v tried this approach, but just like the author states, it won’t work in my case. I’v also tried to set the middle column to relative and the footer to absolute, but that makes the footer overlap the content. I thought that i’l place a div of the same dimensions at the end of the content div, which failed miserably.
You can take a look here

[goalieman34]

@ InfernalLV That is a pretty cool text feature at the bottom of your page. Is it just a slideshow or how did you do that?

[MrPixel]

Ive done it in fiddle, is this what you meant?

http://jsfiddle.net/MrPixel/WrC2g/5/

[InfernalLV]

@goalieman34 its the Anything Slider. you can get it at the download section of this site.

@MrPixel thats not excatly what i had in mind. You see i want the footer to stick to the bottom of the page. Check my fiddle update

[tmette]

Well for some reason the JSFiddle website isn’t working too well for me this morning. Have you tried adding a bottom padding to the middle column that is the same height as your footer?

[Paulie_D]

If I understand the OP correctly, he wants his footer to always be the last item on the page regardless of how tall the page is AND he only wants the footer to only be as wide as the middle column.

That being the case, he would seem to require something to work out the height of the tallest column of the three and apply as much padding as is required to the middle column to make up the difference.

Seems to me that javascript is the answer and I leave that to other folks

[InfernalLV]

The padding-bottom pushes it down. I tried to compensate with a margin-bottom: -x;, but no dice.And there is a 2nd issue,
See an example, if the middle div’s content is vertically higher than the viewport the faux column illusion brakes. It seems that the wrapper isn’t wrapping the div’s inside, but adjusting itself to the viewport. Any ideas on that?
I know its probably because of the height, min-height setup.

[InfernalLV]

Hey there. I’m back!
I figured it out! Partially. It no longer overlaps the footer, but now there is the problem that the body tag is considered 100%, thus the background image goes only to the size of the viewport. And the footer DIV constantly changes size, cuz its size is set in %. You can take a look and check out the code bellow.

Navigation


Bunch of content


Some info


The son of a #$%^!

html{

height: 100%;

background-image: url('../img/background.png');

}

body{

background-image: url('../img/background_orange.png');

height: 100%;

width: 960px;

min-height: 100%;

margin: 0 auto;

}

#leftColumn{

width: 150px;

float: left;

}

#content{

width: 610px;

min-height: 80%;

float: left;

}

#footer{

width: 610px;

height: 20%;

margin: 0 200px 0 150px;

float: left;

}

#rightColumn{

width: 200px;

float: right;

}

Any ideas?

[voila]

Hi,

I had a similar issue, though, I wanted the footer to reach the entire width of the page. This header and footer that sticks.

Please forgive the lack of content and not so great coding (I’m a little embarrassed at my coding as of today- this is a work in progress), the css should give you some ideas though. I hope so… This page was built from ideas, from sites like this one, css-tricks.com.

http://voila.us/ If this is what you’re looking for, just view the source.

Post back if you fix it. I’d like to see how you do it.

Nice URL, btw.

[Author]

Posts