Sure it can be done with css. First let’s be clear about the thread title and what you have in your code. A float cannot be positioned to the bottom of an element, it either floats left or right in the flow of the document. You are using absolute positioning for your bottom div so it would be best to get rid of that misleading ID name #divFloat with absolute positioning on it.
Now, the problem was that you had no content in the parent div nor a height set on it. There was nothing for it to gain height from so your AP’d bottom div didn’t have anything to get a bottom position from. You got the stacking context established correctly by setting position:relative; on the wrapper div.
If you want a bottom positioned floated div that must be done with Javascript. Here is a Demo of that set up.
http://www.css-lab.com/misc-test/bottom-float.html
This will get your AP bottom div working -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background: #BBB;
}
#wrapper {
position:relative;
width:500px;
margin:30px auto;
overflow:hidden;/*float containment for modern browsers*/
background:#EEF;
padding-bottom:100px; /*keep content out of AP div*/
}
#bottom {
background:palegreen;
padding:15px;
height:50px;/* 80px total with 15px padding top & bottom*/
width:170px;
position:absolute;
bottom:10px;
left:150px;
}
p {margin:10px;}
</style>
</head>
<body>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet consectetuer id a quis iaculis adipiscing. Lacinia eu sed nibh et
laoreet tincidunt In vel sagittis id. Sagittis malesuada tellus Nulla condimentum nibh id sit mollis
felis est. Tempor facilisi ut magnis elit in leo lobortis odio tempus porta. Mi est vel mus id Ut
parturient interdum sociis penatibus velit.</p>
<p>Orci volutpat arcu lorem consectetuer ante hendrerit orci non id sed. Massa dui adipiscing
ridiculus justo nunc mauris malesuada Curabitur Nunc cursus. Malesuada a senectus dictum tortor
eros morbi lacus nec ut Quisque. Mauris nibh id cursus id amet Vestibulum Curabitur ac urna urna.
Penatibus congue est auctor porta vitae elit orci condimentum neque ligula. Et senectus feugiat
dictum consectetuer sapien tortor Aliquam nulla pretium elit. Curabitur nulla Nam.</p>
<div id="bottom">
<p>Test Text Test Text</p>
</div>
</div>
</body>
</html>
