Need help with my page layout (footer mostly)

[isolatedhowl]

Hello everyone. I’ve just recently started using html and css. I’ve been trying to design a website for my photographer friend and am currently in the design stage. I really want my copyright text to line up on the bottom of my footer… and I can’t figure out how to do that with this setup I have. Here is a link to the website so you can kind of see what I’m talking about. [LINK](http://students.bcitwebdev.com/jlandon/geordieirving/ “http://students.bcitwebdev.com/jlandon/geordieirving/”) Below is the html and css I’ve written. Help me out guys!

HTML

GEORDIE ROBERT DAVID IRVING

• Home

/ /

• Portfolio

/ /

• About

/ /

• Contact

© Copyright Geordie Robert David Irving. All rights reserved.

CSS
@font-face { font-family:”urbanjungle”;
src:url(‘urbanjungle.otf’);
}

@font-face { font-family:”gudearegular”;
src:url(‘gudea_regular.ttf’);
}

body { background-image:url(‘clean_textile.png’);
background-color:#FFFFFF;
}

h1 { font-size:300%;
}

ul { list-style-type:none;
display:inline;
}

li { display:inline;
}

#container { min-height:100%;
position:relative;
}

#header { background-image:url(‘debut_dark.png’);
background-color:#333333;
font-family:”urbanjungle”;
color:#FFFFFF;
padding:10px
}

#header a:link { color:#FFFFFF;
text-decoration:none;
}

#header a:hover { color:#CCCCCC;
text-decoration:underline;
}

#header a:visited { color:#FFFFFF;
text-decoration:none;
}

#body { padding:10px;
padding-bottom:271px;
}

#footer { font-family:”gudearegular”;
color:#FFFFFF;
position:absolute;
bottom:0;
width:100%;
height:271px;
background-image:url(‘bottom_border.png’);
}

#footer a:link { color:#FFFFFF;
text-decoration:underline;
}

#footer a:hover { color:#CCCCCC;
text-decoration:none;
}

#footer a:visited { color:#FFFFFF;
text-decoration:underline;
}

[JohnMotylJr]

@isolatedhowl : If you are wanting to have your footer always be at the bottom, check out Sticky Footer. This will result in your footer always being at the bottom of the screen regardless of your contents height. It will not be a fixed position rather grow with your content.

[isolatedhowl]

Thanks I’ll check that out.

[isolatedhowl]

@JohnMotylJr : Decided to just fix the footer to the bottom of the page instead… that’s really what I was going for. Was having trouble figuring out how to also make the footer text sit at the bottom of the footer, so just typed the text right onto the footer image. Is there a better way to do this?

[Watson90]

@isolatedhowl

So you’re aware that you will have white (or background-color) space at the bottom of you web page if your content is not enough to fill the viewport such as a long-screened mobile phone when in portrait view?

It can look quite ugly…

[Paulie_D]

I’m not sure but are you even allowed to have an ID of ‘body’?

I suppose it might work but it seems awfully confusing.

[JohnMotylJr]

@isolatedhowl :

Try this and let me know if it works.

Download me

If you cannot download this let me know.

[isolatedhowl]

@JohnMotylJr : Thank you so much for your time and effort, I did revert back to sticky footer and it is working fine. Really the issue I was worried about was that I couldn’t get the text in my footer to line up on the bottom. As I stated earlier, I temp fixed this issue by attaching the text to the footer image. I can’t accept this gracious offer of code as this is my first client project. I need to code everything myself. Thanks again.

@Paulie_D : Thanks, I have now changed it to #content. Don’t know what I was thinking haha.

[JohnMotylJr]

@isolatedhowl
No worries, you will soon love the guidance given in this forum. Its full of really awesome and accomplished professionals that are always offering support to peoples questions.

You can browse the code and see the fixes i made to making the copyright div stick to the very bottom of the footer, that may help so you don’t have to add that into the image. Nothing wrong with using a snippet here or there :) If you have more questions or need guidance, post post post!

[Flippdesigns]

Can I please resurrect this as I really need some help. I inherited this design from a previous designer as I’m now looking after the site for this client. For some reason the footer will not layout to the bottom of the site. It just needs to sit in the bottom padding area of 160px height that I have set for it, but it just won’t go. Any help hugely appreciated
http://Www.aegpartitions.com

[Paulie_D]

@Flippdesigns

There is way too much unnecessary absolute positioning going on in there. Firstly, try turning it all off (esp on #footer and #footer p) and see how things position.

The footer is the last thing in your document flow so it should be at the bottom except for all the positioning.

In fact, you can turn off ALL of the properties for #footer (except font-size).

Next, take any height off of the footer as it should be determined by the content of the internal elements.

For instance, you have set a height of 100px on the footer but footer-wrapper (which is an odd name since it doesn’t wrap the footer) has a set height of 150px.

[Flippdesigns]

i forgot to thank you for this Paulie_D, your advice is always invaluable

[Author]

Posts