Hello,
<div id=outer>
<div id="copyright">
<span id="yr">© 1965 - 2010</span>
<span id="f"></span>
<span id="d"></span>
</div>
</div>
I want the #copyright to be at the bottom of #outer
Here is the css for #copyright
#copyright{
position:relative; margin-bottom:0px; width:672px; height:20px; color:#FFF;
}
#yr{
margin:auto;
}
#f{ position:absolute; right:0px; text-align:center;
}
Thanks Jean
Change the positioning on #copyright to absolute and add a relative positioning context to #outer. Then add bottom: 0px to #copyright as well.
Sorry. CSS would look like:
#copyright{
position:absolute; margin-bottom:0px; width:672px; height:20px; color:#FFF; bottom: 0px;
}
#yr{
margin:auto;
}
#f{
position:absolute; right:0px; text-align:center;
}
#outer {
position: relative;
}
#copyright {
position: absolute;
bottom: 0;
}
#outer {
position: relative;
}
This will have the unfortunate side effect though that #copyright does not count towards the height of #outer anymore, in your example #outer would be 0px high. You can add a bottom-padding to #outer if you're working with fixed heights.
#copyright {
position: absolute;
bottom: 0;
height: 200px;
}
#outer {
position: relative;
padding-bottom: 200px;
}
set #copyright to position:absolute; bottom: 0; left: 0;
#outer {
height: 100px;
border: 1px solid red;
position: relative;
}
#copyright {
position:absolute;
height: 30px;
bottom: 0;
left: 0;
border: 1px solid black;
width: 300px;
}
<div id="outer">
<div id="copyright">
<span id="yr">© 1965 - 2010</span>
<span id="f"></span>
<span id="d"><span>
</div>
</div>
Also, never use "0px". There is no such thing as zero pixels, only zero. Correct way is "right: 0;"
this style sheet do work for you in your div element
style="position:absolute;bottom:0;"
try this its working for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style>
#copyright{
position:relative; margin-bottom:0px; width:672px; height:20px; color:#FFF;
}
#yr{
margin:auto;
}
#f{ position:absolute; right:0px; text-align:center;
}
</style>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="position:absolute;bottom:0;">
hi
<div id="copyright">
<span id="yr">© 1965 - 2010</span>
<span id="f"></span>
<span id="d"></span>
</div>
</div>
</body>
</html>