Floated right DIV appears below the others appears below in shadowbox Chrome only

Floated right DIV appears below the others appears below in shadowbox
Chrome only

I have been trying to get a long list into three columns without using a
table. This list is displayed by popping up in a shadow box. However the
third DIV (the float right DIV) appears below the other two in Chrome but
not in Safari, FF or IE. Is there any explanation / fix for this? I can't
post a screenshot here as it is my first post but here is a link.
http://twitpic.com/d9i924/full
Here is some code:
<div style="float: left; width: 30%; position: relative;display: block;">
<P class="list">Aareon</p>
<P class="list">ABC Systems and Development</p>
...ect
</div>
<div style="float: left; width: 30%; position: relative; display:
inline-block;">
<P class="list">EDS</p>
<P class="list">Electoral Office</p>
...ect
</div>
<div style="float: right; width: 30%; position: relative; display:
inline-block;">
<P class="list">Pfizer Adams</p>
<P class="list">Philips Electronics</p>
...ect
</div>
CSS
P.list {margin:5px 0px; line-height:16px;padding-left:10px;text-indent:-7px}
P.list:before
{content:url('../images/bullet.png');position:relative;left:-3px
}
*I have tried it without the inline-blocks, position: relative, and
increasing the shadow box pop-up size. *The code for the shadowbox is fine
as it works with other pages.