JQuery mobile turn button 90°by default and add to grid

How could I realize a button which is turned 90° 开发者_如何转开发to the right or to the left by default? I dont want to let him turn onClick, but he should be already turned when the page is loading?

Additionally how could I position this button in a vertical center rightsided to a grid?

Like this:

Thanks, zY

DEMO FIDDLE

<div class="grid">
    <div class="block block_a">
        <div class="content"></div>
    </div>
    <div class="block block_a"></div>
    <div class="button"> button </div>   
</div>

var btn = $('.button');
btn.css('transform','rotate(90deg)'); 

a fix for IE would be replacing the div with an image or just set a separate css playing around with the button styles.

As the OP asked '...Argh! please... make it work in IE!?...' ;) here is an example on how to do that:

DEMO FOR IE 8,7,(and believe it or not) 6!

Just add to the previous code - and modify for your needs the 'px' to best position the DIV

if($.browser.msie && $.browser.version<="8.0"){
    btn.css({
        filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)',
        top:'100px',
        left: '184px'   
    });   
}

ONE ONLY THING... (sad but true)

The IE DX filter only permits 4 stages of rotation (1,2,3,4) , so you won't be able to rotate an element by a fancy degreed position like 37° or doing like : BasicImage(rotation=2.3).

I'm not sure if I get what you're after a 100% but my first guess would be to just use the CSS writing-mode property ('lr-tb' in your case).

See: http://www.w3.org/TR/2001/WD-css3-text-20010517/#PrimaryTextAdvanceDirection