I am trying to align a button to the right edge of a table inside a container-div that has no set width. The goal is to have the button float on the right side of the table, lining up with its right edge. While my current approach works in most browsers, it fails in IE versions 7 and below. How can I achieve this alignment correctly?
<head>
<style>
#tableContainer {
float: left;
}
#btn {
float: right;
}
</style>
</head>
<body>
<div id="tableContainer">
<table>
<tr>
<td>a b c</td>
<td>a b c</td>
<td>a b c</td>
<td>a b c</td>
</tr>
</table>
<button id="btn">buttontext</button>
</div>
</body>
</html>
This visual representation illustrates what I am aiming for:
__________________
| |
| table |
|________________|
|btn|
‾‾‾‾‾