You need to use the CSS3 transform property rotate – see here for which browsers support it and the prefix you need to use.
One example for webkit browsers is -webkit-transform: rotate(-90deg);
Edit: The question was changed substantially so I have added a demo that works in Chrome/Safari (as I only included the -webkit- CSS prefixed rules). The problem you have is that you do not want to rotate the title div, but simply the text inside it. If you remove your rotation, the <div>s are in the correct position and all you need to do is wrap the text in an element and rotate that instead.
There already exists a more customisable widget as part of the jQuery UI – see the accordion demo page. I am sure with some CSS cleverness you should be able to make the accordion vertical and also rotate the title text 🙂
Edit 2: I had anticipated the text center problem and have already updated my demo. There is a height/width constraint though, so longer text could still break the layout.
Edit 3: It looks like the horizontal version was part of the original plan but I cannot see any way of configuring it on the demo page. I was incorrect… the new accordion is part of the upcoming jQuery UI 1.9! So you could try the development builds if you want the new functionality.
Hope this helps!