try something like this is all i can suggest
I only really added the border tags for any debugging but it looks like it works, dunno if its exactly what you want thoughHTML Code:<html>
<head>
<style>
.container{
height:90%;
width:100%;
border: 1px solid black;
}
.footer{
height:10%;
width:100%;
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">Main content..</div>
<div class="footer">Footer Content..</div>
</body>
</html>
I don't want it to be like facebooks bar, but what you posted looks like it'd do that.Quote:
Originally Posted by AlexOC
Now that works (for those two divs you posted)... I'll have a try at putting the content in a div and then just the footer. Cheers.Quote:
Originally Posted by MrCraig
Well it shouldnt do that, it should be at the bottom of the full page. i think.Quote:
Originally Posted by Hitman
Try it. because it positions itself below 100% of the content, then takes away half of itself to fit on.
You MAY have to include an iframe in the container div if you want to put lots of content in it though as im not too sure what'll happen if you overfill it (but im guessing it'll stretch)
Tried, does the same as the facebook bar because its position is absolute... :(Quote:
Originally Posted by AlexOC
Yeah it'll stretch.Quote:
Originally Posted by MrCraig
Cant you change the position?Quote:
Originally Posted by Hitman
As I said, I've tried the other positions... static, relative, fixed... they all don't do it.Quote:
Originally Posted by AlexOC
Getting a footer to stick at the bottom without going over the text is extremely difficult. HTML was never made with the same control you have over width in height :/.
Think I have it...
Seems to be working!Code:.footer {
background-image:url(images/footerbg.png);
background-repeat:repeat-x;
width:100%;
height:74px;
position: relative;
margin: 12em 0 0;
}
Not to do with the question, but use shorthand for everything:
Improves loading time :)Code:.footer {
background:url(images/footerbg.png) repeat-x;
width:100%;
height:74px;
position:relative;
margin:12em 0 0
}