Hi,
If I understand correctly then what you want is not actually possible (for all but 1 browser - which I will explain later).
If you want an image absolutely placed at the bottom of a relative container then that is no problem. You can position the image at bottom:0;left:0 and it will sit happily at the bottom of the container. The problem is that because it is absolutely positioned then static content in that container will overlap. You could therefore apply padding bottom to the parent container that matches the height of the image and this will keep the other content from overlapping the image.
You can't then however have content wrap around an absolutely placed image as that is impossible.
What you are seeming to require is the age old request for a new property possibly called "float:bottom" where an element will float at the bottom of the container and still allow text to wrap. There is no such property of course and there is no way to do this apart from a single text case in Firefox only.
This seems to be what you are asking for but will only work in Firefox so is of no practical use other than interests sake.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float Bottom 1</title>
<style type="text/css">
h1{text-align:center;}
body{line-height:1.2}
.test {
text-align:justify;
width:50%;
margin:auto;
border:4px solid red;
height:105px;
display:table;
line-height:25px;
background:#EEE;
}
.test p {
margin:0;
padding:10px;
}
b {
float:right;
width:3px;
height:100%;
margin-bottom:-115px;
display:table;
}
span {
width:98px;
height:98px;
float:right;
border:2px solid red;
margin:0 5px 0 5px;
clear:right;
position:relative;
}
</style>
</head>
<body>
<h1>Float bottom in Firefox 3.5 only</h1>
<div class="test"> <b></b><span>float</span>
<p> START text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text END</p>
</div>
</body>
</html>
The only cross browsers way to do it would e with a little javascript.
Here's was an old example that Erik J posted a long time ago:
Code:
<!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>Float Pushed to Bottom</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#wrapper {
margin: auto;
border: 1px solid #cc0;
width: 80%;
overflow: hidden;
background: #ffc;
}
#wrapper p {
margin: 10px 10px 0;
text-align: justify;
}
.floatpusher {
float: right;
margin-bottom: -129px; /* the bottomfloat height + margin = float to bottom */
width: 1px;
}
#bottomfloat {
clear: right;
float: right;
margin: 19px 10px 10px; /* margin-top as default line-height to avoid overlap */
border: 1px solid #cc0;
width: 200px;
height: 100px;
background: #ff9;
}
</style>
<script type="text/javascript">
function floatpush(){
var els = document.getElementsByTagName('div'),
elsLen = els.length,
el,
i;
for (i = 0; i < elsLen; i += 1){
el = els[i];
if (el.className.indexOf('floatpusher') > -1){
el.style.height = "auto";
el.style.height = el.parentNode.offsetHeight + "px";
}
}
}
window.onresize = floatpush;
window.onload = floatpush;
</script>
</head>
<body>
<div id="wrapper">
<div class="floatpusher"></div>
<div id="bottomfloat"></div>
<p>Lorem ipsum dolor sit amet consectetuer odio pellentesque scelerisque nisl In. Wisi Vestibulum interdum laoreet pulvinar Curabitur ipsum interdum laoreet adipiscing tincidunt. Nam id platea dolor felis malesuada Nulla cursus magna pretium metus. Orci congue orci feugiat scelerisque malesuada leo vitae Morbi congue ut. Vestibulum Curabitur id id Curabitur vel mi vel vel Suspendisse pretium.</p>
<p>Lorem ipsum dolor sit amet consectetuer odio pellentesque scelerisque nisl In. Wisi Vestibulum interdum laoreet pulvinar Curabitur ipsum interdum laoreet adipiscing tincidunt. Nam id platea dolor felis malesuada Nulla cursus magna pretium metus. Orci congue orci feugiat scelerisque malesuada leo vitae Morbi congue ut. Vestibulum Curabitur id id Curabitur vel mi vel vel Suspendisse pretium.</p>
</div>
</body>
</html>
One of the main reasons I want it to remain contained is because I want the right column to float: left and use padding to space it out. Right now, the right column expands completely to the edge of the wrapper container which is not what I want.
You lost me there 
Why not float it right and give it a width. No need for padding.
Reply With Quote
Originally Posted by netgrubber
Bookmarks