Как остановить float: оставил div от прикрытия следующим div?

Question

У меня есть следующий код:

<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>

Первый div выталкивает текст во втором div вправо, но не сам второй div, поэтому a в первом внутреннем div будет скрыт T во втором внутреннем div, и зависание над a не приведет к включению

Это довольно упрощенный пример, но как мне получить такую ​​раскладку, сохранив position:relative второго div и не добавляя к нему полей, поскольку первый div может отображаться или не отображаться? Кажется странным, что второй div покроет первый.

Answer 1

Если я вас правильно понял ... Поместите float: left; и во второй див.