I have a layout that includes a central container or wrapper

How do I add a footer under this that goes all the way across

I have created a new div but for some reason it sits in the middle of my screen half way up my layout ???

A link to where this can be seen would be most helpful.

This is where I am at so far

http://www.bitsmail.co.uk/saco/layout10-content.html

My inspiration or rather the man who owns the company was this site -
http://www.earthday.org/2012
I love the site but trying to translate it to a working site & in dark green rather than blue - I am struggling to love it

might have to post for a review & get some ideas of people

Originally Posted by tonya

This is where I am at so far

http://www.bitsmail.co.uk/saco/layout10-content.html

My inspiration or rather the man who owns the company was this site -
http://www.earthday.org/2012
I love the site but trying to translate it to a working site & in dark green rather than blue - I am struggling to love it

might have to post for a review & get some ideas of people

You need to make another div out side of the container for the footer.

Check out the site I sent you on the other topic you posted. Use the same code for that too.

Thanks again

I have not done my dev work recently so am feeling really really rusty !!!!

Brain just not functioning at all

Did you do a similar thing where you have a small graphic in front of a clickable link like 'learn more'

I also like the use of the boxes to surround text

Yes like it a lot - will use some inspiration if you don't mind

vultren - why is your footer bg div before the footer container div ???

I would have thought it had to be other way around ???

Originally Posted by tonya

vultren - why is your footer bg div before the footer container div ???

I would have thought it had to be other way around ???

Because the footer bg has the background in the css. bg=background. Then the container gets the same properties as the main container tag so it matches the site.

OK I am getting there

This is what I have so far !!! Copied your code - is that ok ????

http://www.bitsmail.co.uk/saco/default.htm

Only problem I have now is that #container2 is an absolute position - so I can have it over the #masthead but then the footer wants to sit under the masthead which means setting a height for container2 - when content changes I am stuffed !! any way around this - don't really want to amend every page as its a template ??? - shall I post as separate post ??

If you look at company history you can see the problem

Thing is it doesnt sit right at the bottom ! It sits in position but doesnt limit the page - what I mean is it isnt always at the bottom - why is that ???

The page seems to go on underneath the footer I want it to end !!

Originally Posted by tonya

Thing is it doesnt sit right at the bottom ! It sits in position but doesnt limit the page - what I mean is it isnt always at the bottom - why is that ???

The page seems to go on underneath the footer I want it to end !!

Your page height isn't set correctly so the footer sticks to the bottom.

Originally Posted by tonya

OK I am getting there

This is what I have so far !!! Copied your code - is that ok ????

http://www.bitsmail.co.uk/saco/default.htm

Only problem I have now is that #container2 is an absolute position - so I can have it over the #masthead but then the footer wants to sit under the masthead which means setting a height for container2 - when content changes I am stuffed !! any way around this - don't really want to amend every page as its a template ??? - shall I post as separate post ??

If you look at company history you can see the problem

I don't mind. Feel free to use the code.

You need to make the footer float so it's under the content.

Thanks for the advice - think its fixed now

The page only continues to scroll past the footer when the screen res is changed in the browser

spent ages fiddling with the css to fix it.

created an outside main-page div that set height to 100% ??? thinking that would do the trick - sort of ?? LOL

enough for tonight - back on monday & thanks for advice so far

So you want to create a footer that sticks to the bottom of the page, at 100% width?

<style type="text/css">
/*footer div*/
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;

/*extra stuff*/
background:rgba(0,0,0,0.5);
border-top:1px solid rgba(255,255,255,0.5);
}

/*for padding*/
#padding {padding:5px 10px;}
</style>

<!--HTML code-->
<div id="footer"><div id="padding">Hello!</div></div>