Every time I try to do something seemingly-simple in CSS, it punches me in the gut and steals my lunch money :(
I've been looking at this for over an hour and haven't made a bit of progress...
I have a content div that contains a 460x160 image. All I want to do is position the image at the bottom-right corner and wrap my text around it.
<div id="contents">
<img src="..." />
text text text text text text ...
</div>
So I want it to look like:
------------------
| text text text |
| text text text |
| text text -----|
| text text | |
------------------
Doing it with a top-left or top-right image is cake:
#contents img { float:right; }
------------------
| text text | |
| text text -----|
| text text text |
| text text text |
------------------
Now how do I push that to the bottom? The best I've come up with so far are:
#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px
------------------
| text text |
| text text |
| text text -----|
| text text | |
------------------
In this case the text does not print in the margin, so there is white space above the image.
#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }
-or-
// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }
------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------
In this case the text prints over or under the image.
So... how can I accomplish this?