HTML: Anchoring something to the right side of an element

Question

Hi all,

I have a span that I wish to right adjust so that it's anchored to the edge of an underlying table. I've tried enclosing both elements in a div, but I can't think of a good way of letting the div auto shrink to be of the same size as the table while right-floating the span. Ideas?

I've tried using style="display: inline-block; float: left;" but that doesn't work when the span element is a float: right, it expands the div too much then.

The browser used is IE7 and IE8 in compability mode.

Answer 1

Try:

<div class="wrapper">
<table>
...
</table>
<span class="caption">Here is a caption</span>
</div>

with:

div.wrapper { overflow: hidden; }
span.caption { float: right; }

The overflow part is important.

Technically you could use the <caption> child element of <table> for this but you can't style this with CSS (to the bottom right) on IE6-7.

Answer 2

A solution might depend on what you are using the <span> for. How important is it for the <span> to be floated?

Does this help?

<style type="text/css">
div.wrapper { float: left; text-align: right;}
span.caption { background-color: #9c9;}
</style>

and

<div class="wrapper">
 <span class="caption">caption</span>
 <table border="2">
  <tr><td>column 1</td><td>column 2</td></tr>
 </table>
 <span class="caption">caption</span>
</div>

Make sure and clear whatever comes after the wrapper.