Float a span bottom right inside a div [duplicate]

Question

Possible Duplicate:
How do I get a div to float to the bottom of its container?

I have this code to float a div to the bottom right side of a div. But the span gets stuck to the upper left.

<div id="color_tile" class="select_tile" title="Choose color" style="background: grey; background-image: url(wallpaper/201_color_picker.jpg);" >    
  <span id="color_picker" style="visibility: visible; display: block; float: right; vertical-align: bottom;"></span>
</div>

Is there a different way to place the span?

Answer 1

You should probably separate your HTML/CSS from each other properly.

Your code could look something like this

HTML:

<div>
    <span>Absolute right bottom aligned to div...</span>
</div>

CSS:

div { position: relative; }
div > span { position: absolute; right: 0; bottom: 0; }

Obviously your div should have some height/width which exceeds that of the span, but generally this is a very acceptable way of doing it.

This doesn't make the content of the div 'flow' around the span but that wasn't specified clearly. As said, what you have there should work in that case and if it doesn't it is in the rest of your code.