How to stop float:left div from being covered up by following div?

Question

I have the following code:

<div>
    <div onmouseover="this.style.color='red'" 
         onmouseout="this.style.color='blue'" 
         style="float:left">
        a
        <br/>
        b
        <br/>
        c
    </div>
    <div onmouseover="this.style.color='red'" 
         onmouseout="this.style.color='blue'" 
         style="position:relative;">
        Testing, one two three...
    </div>
</div>

The first div pushes the text in the second div to the right, but not the second div itself, so the a in the first inner div will be covered up by the T in the second inner div, and hovering over the a will not trigger the onmouseover.

This is a pretty simplified example, but how do I get this sort of layout, preserving the position:relative of the second div and not adding any margins to it, since the first div may or may not be displayed? It seems strange that the second div will cover up the first.

Answer 1

If i understood you correctly.. Put float: left; to the second div as well.