Move 'in stock' element in css sheet

Hi guys,

I have moved my 'in stock status' and 'add to cart' element from the bottom of the product page to the top, and I have added the code:

#productDetailsList{
float: right;
}

to my .css as I want the 'in stock' status to sit right under the 'add to cart' box.

The problem is that the 'in stock' element is quite long so the the text actually sits closer to the middle of the page rather than under the 'add to cart' element.

I've tried playing around with the width of the element by adding the code such as:

#productDetailsList{
float: right;
width:100px
}

But is doesn't quite give me the result I want. I'm pretty new to coding, I've never had any official training. Can someone explain how to get the result I want, and where these elemants get their height and width attributes from?

Here's a link to one of my products:

http://www.nintendoparts.com.au/ds-lite-screens-c-2_5/ds-lite-top-lcd-screen-p-1?zenid=jclc3n50aidv17mvrmn0ma9e06

Your 'in stock' is being controlled by text-align left from your main wrapper css. If you add a text-align: right to your new div it will move it over.

Thanks for the reply, that worked but didn't give me the exact result I'm after.

I have included screen shots of what has happened and what I'm after. Ideally I would be able to make the #productDetailsList div the same width as the #cartAdd div, float the div to the right and then have the text aligned to the left within he div. I have highlighted the #productDetailsList div with firebug so you can see the width of the div and see what I'm after.