Forum Moderators: not2easy
All joking aside, my footer is respecting the length of the content in the #content div, but not the right side divs. It just lays where the content in #content stops, and if that content is too short, it bleeds over whatever's on the right.
HTML:
<div id="content">
<div id="right">Right container.
<div id="rightbottom">Right container's rounded bottom corners bg image.</div>
</div>
PHP-called content and stuff.
</div>
<div id="footer">Footer PHP includes, links, etc.</div>
</body>
CSS:
#footer{position:absolute;
left:0px;
bottom:0px;
width:100%;
background-color:#d6deac;
border-top:#ecf2cd dashed 2px;}
#content{width:800px;
margin:0px auto;
border-left:1px #cdcccc solid;
border-right:1px #cdcccc solid;
background-color:#FFFFFF;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding-bottom:45px;}
#right{width:198px;
float:right;
background-image:url(images/snippetstart.png);
background-repeat:no-repeat;
background-position:top;
padding-top:43px;
padding-left:12px;
padding-right:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#999999;}
#rightcontent{width:145px;
margin-right:25px;
margin-left:25px;}
#rightbottom{width:198px;
float:right;
height:85px;
background-image:url(images/snippetend.png);
background-repeat:no-repeat;
padding-top:15px;}
Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
#rightcontent isn't used in the html you provided, but I suppose it goes in #right before #rightbottom ?
#rightcontent is a div box surrounding the text contained in the #right div, just before #rightbottom. It keeps the text inside it neat and tight.
And assuming you want a top left and bottom right rounded corner, or have a image that's ok for what you need ...
I'd use just 2 elements for the float
(you only need 2 background images so that's enough)
I'd make sure the #content stretches to clear the float (the "theend class is what I'm using now cause I've no idea if you have content there)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" \
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#footer {
position:absolute;
left:0px;
bottom:0px;
width:100%;
background-color:#d6deac;
border-top:#ecf2cd dashed 2px;
}
#content{
width:800px;
margin:0px auto;
border-left:1px #cdcccc solid;
border-right:1px #cdcccc solid;
background-color:#FFFFFF;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding-bottom:45px;
}
#right{
width:198px;
float:right;
background:url("cornertl.gif") no-repeat top left;
background-color:yellow;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#999999;
}
#rightcontent{
padding: 43px 37px 43px 37px;
background: url("cornerbr.gif") no-repeat bottom right;
}
.theend{
clear:both;
}
</style>
</head>
<body>
<div id="content">
<div id="right">
<div id="rightcontent">Right container's rounded bottom corners bg image.</div>
</div>
PHP-called content and stuff.
<p class="theend"> </p>
</div>
<div id="footer">Footer PHP includes, links, etc.</div>
</body>
</html>
I'm not sure what you seek for the footer.
As it is, it doesn't work at all for long pages. (It'll scroll along with the page)
You might need a wrapper around it all to take on part of the role of the content (e.g. the centering and width), but not some others (like the padding) in order to stretch that wrapper with the footer.
Anyway I'd go in this direction:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" \
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrapper{
width:800px;
margin:0px auto;
border-left:1px #cdcccc solid;
border-right:1px #cdcccc solid;
}
#content{
background-color:#FFFFFF;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding-bottom:45px;
min-height: 250px;
}
#right{
width:198px;
float:right;
background:url("cornertl.gif") no-repeat top left;
background-color:yellow; /*might not need this depends on your images*/
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#999999;
}
#rightcontent{
padding: 43px 37px 43px 37px;
background: url("cornerbr.gif") no-repeat bottom right;
}
#footer{
clear:both;
background-color:#d6deac;
border-top:#ecf2cd dashed 2px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="right">
<div id="rightcontent">Right container's rounded bottom corners bg image.</div>
</div>
PHP-called content and stuff.
</div>
<div id="footer">Footer PHP includes, links, etc.</div>
</div>
</body>
</html>
funny opener :)
I think you're probably going to need to look for "sticky footers" or something or give us more of your code.
You say the footer is respecting your content however when I added enough content to make the page longer than the viewport it didn't, but I could be misunderstanding that bit of your question
Your right column is floated so unless your content div, which "contains" the float is cleared properly the right column will always have its own space in life, and will always overflow it's "parent" if it's longer
Then absolute positioning removes an element from the flow entirely so it, the footer, doesn't know there's anything else on the page.
so is it that you want a full page width footer under a 800px wide centered layout, always at the bottom regardless of the page length?
Basically, I have a header which is set to 800px wide, at the very top of the page. This is fine and needs no work.
Underneath that, I have a content div which holds all my text, and is also 800px wide. This content div doesn't interfere with the header, and is likewise spaced just fine. Inside this content div, I have a #right div, which is a div that floats right and contains a "Note from the author." Inside that are various little divs to keep images and text in place, and I'm sure those are probably irrelevant to my problem.
Now all I wanted was a footer div underneath that central #content div, and I wanted that footer to respect everything above it and sit where it belongs. :)
When I tried to make a footer that sat as a div underneath the content, and placed it in my HTML correctly, it respected the text inside the content and was just fine when the content text was longer than the nested #right div.
When the content text was too small, however, the footer followed suit and nestled itself underneath that content -- flooding itself overtop the #right div.
Did that help, Suzy? Please let me know if I'm not making sense. I'm happy to provide a short screenshot if it will help - but I'm not sure this is allowed.
Edit: Suzy, I see what you're saying about the right div always having it's own space -- can you explain what you mean by "clear"?
Did that help, Suzy? Please let me know if I'm not making sense. I'm happy to provide a short screenshot if it will help - but I'm not sure this is allowed.
It's not allowed, thanks for asking.. but yes the description helped.
I see what you're saying about the right div always having it's own space -- can you explain what you mean by "clear"?
Search for "Containing Floats" for more.. but in short
when a div/element contains one or more floats it doesn't know those floats are there, they're removed from the flow, so you have to "clear" the float(s) - in the past that involved adding a 'clearing' div or element
e.g.
<br style="clear: both">
right before the container divs (in your case #content) closing tag. You can still do this if you'd prefer
however you can 'tell' a parent div to contain its floated children in a better way these days.. either float the parent div, (not a good solution for your centered layout) or specify the overflow property to anything other than visible. hidden is good as 'auto ; can produce scrollbars under certain circumstances even if there's no height restriction.
if you do that then there should be no need to use position absolute on the footer at all, it should simply sit below whichever of your columns is the longest
IE up to version6 needs hasLayout=true triggered as it doesn't understand the overflow property until IE7.. but you have a width on your container so the width property is doing that already for you..
#footer{
/*
position:absolute;
left:0px;
bottom:0px;
width:100%;
*/
background-color:#d6deac;
border-top:#ecf2cd dashed 2px;
}#content{
overflow: hidden;
width:800px;
margin:0px auto;....
hth.. that's not a sticky footer as they attempt to hug the bottom of the screen until content moves it down naturally, but maybe that's not required?
-Suzy
I really appreciate your help! Please let me know if there's anything I can ever help either of you with, though you both seem to have a pretty good grip on CSS, if I do say so!
xo
El
