CSS + center & bottom a div.
Moderator: General Moderators
CSS + center & bottom a div.
Is there a way in CSS to both center and bottom a certain div?
I tried several methods but if I bottom it with an absolute position the centering doesn't work and vice versa.
Any ideas?
I tried several methods but if I bottom it with an absolute position the centering doesn't work and vice versa.
Any ideas?
Fixed, I made a container, added 100% height to html,body
and then to the container div.
the footer div then just looks like
and then to the container div.
the footer div then just looks like
Code: Select all
#bottom {
position: absolute;
bottom:0 ;
width:671px;
background-image:url(jpgif/beta_r6_c1.jpg);
}It's too late to turn on my pc to test in IE, but in FF OSx this works:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<style type="text/css" media="screen">
#bottom {
position: absolute;
bottom:0 ;
left:50%;
width:671px;
background:red;
margin-left:-350px;
background-image:url(jpgif/beta_r6_c1.jpg);
}
</style>
</head>
<body>
<div id="bottom">
some content
</div>
</body>
</html>
Ok, now I remember. That's an odd bug in Mozilla/FF. This solves the bug:
This is based on the explanation about footerstickalt, I would definately read that post.
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<!-- Date: 2006-12-29 -->
<style type="text/css" media="screen">
html { height:100%;}
body { height:100%;}
#container {margin:0 auto;width:671px;position:relative;min-height:100%;}
#content {padding-bottom:2em; /* bit of padding to give room for the footer, adjust as needed */ }
* html #container { height:100%;}
#bottom {
height:2em; /* "fixed" height necessary unfortunately, adjust as needed */
position:relative;
margin-top:-2em; /* to move it up. same as height */
margin-left:auto;margin-right:auto; /* for centering */
width:671px;
background:red;/* to see whats happening */
background-image:url(jpgif/beta_r6_c1.jpg);
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ac lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisi. Cras suscipit, metus eu luctus tristique, lacus tellus pulvinar sapien, ac pulvinar sem metus non nisl. Morbi risus ligula, pellentesque eu, aliquam a, euismod quis, magna. Nam sed libero. Suspendisse turpis. Mauris vel neque vitae ipsum dictum convallis. In ultricies. Integer urna diam, sodales at, volutpat vitae, molestie nec, risus. Integer eget mauris. Sed ultricies lectus vitae metus. Curabitur tempus, ipsum sit amet viverra rhoncus, urna sapien cursus massa, dapibus laoreet libero massa nec ipsum. Morbi metus est, convallis ac, pellentesque eget, vestibulum et, quam. Pellentesque ultrices, quam quis dictum auctor, nisi enim ultricies risus, id faucibus lacus lectus et urna.</p>
<p> Phasellus mi augue, congue ac, feugiat quis, luctus vitae, massa. Etiam vitae ligula. Donec urna est, feugiat in, cursus et, placerat sit amet, nibh. Fusce vitae diam ut urna dictum gravida. Praesent at erat id turpis tincidunt porta. Aliquam eu turpis. Suspendisse sed enim. Vivamus dui metus, sagittis eget, volutpat non, posuere vitae, augue. Aenean id augue. Donec cursus tincidunt quam. Pellentesque a purus sed pede pretium interdum. Nulla ullamcorper tincidunt lacus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p> Donec suscipit molestie urna. Nullam magna arcu, imperdiet hendrerit, cursus eu, tempor ut, turpis. Vivamus ultricies mauris vitae nisi. Donec risus eros, hendrerit sit amet, molestie eu, porta ornare, quam. Etiam nulla leo, lobortis eu, venenatis ut, pretium sit amet, velit. Praesent consequat, dui quis cursus dapibus, tellus erat malesuada erat, in faucibus nisi augue vel urna. Nam lorem dui, laoreet et, interdum nec, sollicitudin sit amet, tellus. Nunc et elit nec orci tristique pretium. Nulla facilisi. Nullam auctor, lorem nec molestie viverra, mauris nunc ultrices massa, id ullamcorper metus urna eget augue. Nam faucibus suscipit pede. Mauris dolor lacus, eleifend quis, consectetuer non, sodales quis, justo.</p>
<p> Ut fermentum, arcu vel tempus varius, nunc lorem mollis dolor, at scelerisque velit massa nec orci. Aenean iaculis. Mauris at enim. Pellentesque vitae leo. Morbi in libero eu lectus blandit imperdiet. Ut porttitor egestas nisl. Duis consequat, lorem non ullamcorper dictum, magna augue tristique purus, eu gravida nisl enim ac erat. Morbi ac purus a dui ultrices scelerisque. Vestibulum urna ipsum, luctus id, hendrerit id, sollicitudin in, lectus. Proin diam. Maecenas id lacus. Suspendisse bibendum, neque vitae tempor faucibus, leo nibh rutrum dui, ut pulvinar lorem arcu vitae augue. Integer ut lacus. Sed nunc augue, tincidunt vel, sodales in, luctus eget, libero. Aliquam faucibus. Quisque dignissim metus at leo. Aliquam nec ante nec leo consectetuer bibendum. Nam iaculis augue vitae ante. Curabitur laoreet. Quisque ut erat.</p>
<p> Aliquam commodo. Nullam libero nulla, consequat nec, blandit et, sollicitudin ac, ante. Praesent sit amet pede et est imperdiet semper. Donec rhoncus nonummy justo. Donec id nisi. Donec nonummy, turpis sed vehicula consectetuer, orci lorem accumsan felis, sed suscipit neque nibh fringilla libero. Aenean pharetra elit ut metus. Donec id eros sed odio aliquet ultricies. Aenean in nisi. Maecenas libero odio, egestas id, ornare sed, nonummy in, odio. Aenean enim. Donec convallis lectus ut neque. Pellentesque lacinia cursus turpis. Mauris dui ligula, volutpat at, aliquam non, commodo sit amet, eros. Proin sapien. Aenean orci.</p>
</div>
</div>
<div id="bottom">
some content
</div>
</body>
</html>
IE? What was that again? I remember my grandfather talking about that ...
kidding aside, have you checked out the example and explanation in the post of footerstickalt? His example works in most browsers and definitely IE. So there's probably a small difference between his example and the one I put together quickly.
kidding aside, have you checked out the example and explanation in the post of footerstickalt? His example works in most browsers and definitely IE. So there's probably a small difference between his example and the one I put together quickly.