View Full Version : How to place DIV to the bottom

12-20-2008, 08:13 PM
I want to place a DIV at the bottom of the site... just like a float to the sides but at the bottom.

12-20-2008, 08:15 PM
A few options are available, this works well though

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
*, body {margin: 0; padding: 0; position: static;}
#wrapper {display: block; position: absolute; min-height: 100%; background: #eee;}
#content {display: block; background: #ddd; margin-bottom: 3.3em; padding: 1em; width: 600px; border-bottom: 1px solid #bebebe;}
#footer {position: absolute; display: block; bottom: 0; display: block; background: #ccc; padding: 1em; border-top: 1px solid #c6c6c6; width: 600px;}
h1, p {margin-bottom: 20px;}
<!--[if lt IE 7]>
body, #wrapper {height: 100%;}
<div id="wrapper">
<div id="content">
<h1>Fixed Footers without JavaScript</h1>
<p><strong>This is a nice and easy solution to those unsightly gaps below your footers and while it won’t be appropriate for every site, it might come in handy from time to time.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper ligula sed mauris. Maecenas sed lectus ac urna egestas mollis. Vestibulum ac tellus in augue pellentesque suscipit. </p>
<p>Praesent non sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id erat. Nullam pretium, orci in mollis consequat, nunc tellus vulputate augue, vitae scelerisque massa arcu sed lacus. Nam tincidunt. Donec ut tortor. Morbi sapien nunc, adipiscing non, pulvinar ut, consequat ac, tellus. Sed vitae turpis vel ipsum convallis mollis. Phasellus eget urna nec odio condimentum blandit. Morbi vel enim. Suspendisse eget erat nec ipsum vulputate luctus. Nullam molestie. Proin in velit a nibh condimentum dapibus.</p>
<div id="footer"> this is the footer</div>


12-20-2008, 08:17 PM
Also have a read of this article