float

Basically I'm trying to get a Span block to visually float and overlap the edges of a box which is overflow set to scroll.

So here is code example to try and clarify the issue.

.table_wrapper { height: 200px; overflow: scroll; }
a span { display: block; padding: 10px; background-color: #FF0000; color: #FFFFFF; }
 
<div class="table_wrapper">
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td><a href="#"><span>This message should Hover</span>Content 1</a></td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</table>
</div>

Hi all

I'm adding elements to a DIV using Javascript at the moment. These elements are floated right, and the effect is that they appear in the top right corner, and are added to the left until there's no horizontal space, at which point they begin in the next row.

What I'd like to happen is that the elements are added below the previous, and if there's no room left vertically, they are added in the next column.

Any ideas?

Cheers

Gausie

chi mi puo spiegare come mai il "float" si comporta in modo diverso tra IE7 e Firefox ?
vi allego un esempio elementare http://www.itinerarialpinistici.com/test/prova.htm

First of all, I would like to introduce myself. This is my first post here as I'm fairly new to complete CSS layouts. My name is Tim and I'm from the Twin Cities area of Minnesota. I've done a few sites with strictly CSS and never had a problem but this one is driving me nuts. I'm having trouble with my Navigation ul completely vanishing in IE6 at random times. The site I'm referring to is currently live at DigitalTown.com if you would like to check it out. Here is the code.

HTML

         <ul id="topnav">