Google Chrome Display Issues

[godoploid]

I have been having problems with Google Chrome Displaying "inline table" properly. I have tried everything, the basic problem is that I want three columns in a content area to display side by side, but they are stacking instead as if I were using "Display: block". I don't understand the problem and haven't had this problem until recently. I wondered if perhaps Google Chrome changed the way it handles some display properties. Below is the styles I am using and then the source html. If anyone has any suggestions it would be greatly appreciated, probably a small fix but something I just overlooked.

/********* the style ********/

#content { width: 1000px; height: auto; position: relative; background-image: url('../img/content-body.png'); background-repeat: repeat-y; vertical-align: top; display: inline; }
#left { width: 240px; height: auto; position: relative; display: inline; vertical-align: top; }
#center { width: 470px; height: auto; position: relative; display: inline; padding: 10px; vertical-align: top; }
#right { width: 240px; height: auto; position: relative; display: inline; vertical-align: top; }

/*********** the html ****************/


<div id="content">
<div id="left">
<p>left</p>
</div>
<div id="center">
<p>center</p>
</div>
<div id="right">
<p>right</p>
</div>
</div>

Thanks in advance, to anyone that can help!
Tom Bird