CSS transform: rotate(-90deg) и position:absolute

[Galli]

Искам да завъртя един div вертикално, но той е с position:absolute спрямо обграждащия div. При IE6 работи точно. Но при FF и Chrome изчезва част от текста. Ако му задам width се показва, но пък се измества надясно.
Ето демо.
http://md-place.hit.bg/k.html
Ето код.

<!DOCTYPE HTML>
<html lang="bg">
<head>
<meta charset="windows-1251" />
<title>Заглавие</title>
<style>
body{
margin:0;
padding:0;
}
.wrapper{
margin:0 auto;
padding:0;
position:relative;
width:980px;
}
.content{
margin:0;
padding:0;   
width:700px;
float:left;
}
.side{
margin:0;
padding:0;
width:280px;
float:right;
}
.rotate{
margin:0;
padding:0;
position:absolute;
top:0;
left:0;
background:#ccc;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);	
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
</head>
<body>
      <div class="wrapper">
	  <div class="rotate">вертикален текст</div>
         <div class="content">
			<div>
				<h1>Заглавие</h1>
			</div>	
         </div>
         <div class="side">
			 <p>атина</p>
			 <p>атина</p>
			 <p>атина</p>
			 <p>атина</p>
			 <p>атина</p>
         </div>
         <div style="clear:both;"></div>
      </div>
</body>
</html>

Как да го оправя?

 

[adrian]

[css].rotate{
margin:0;
padding:0;
position:absolute;
top: 50px;
top: 0\9; /* IE8 and below */
left:0;
background:#ccc;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progidXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
}[/css]

Промени позицията му (при мен top: 50px се получи идеално), и после за IE 8 и надолу го направи да е 0. Защото до колкото виждам Chrome и Mozilla, завъртат дива около неговата среда, затова и се изрязва отгоре. Докато този филтър за IE работи доста по-добре като завърта дива и горния му ъгъл започва от оказаната позиция.

Също добавих и за опера, защото специално за това свойство и те си имат префикс...

Най-отдолу също добавих оригиналното свойството, защото все пак се очаква и то някога да се поддържа

 

[Galli]

Така добре, но ето един border. Стои си вдясно. А съм му сложил left:0;
http://md-place.hit.bg/k.html

 

[adrian]

[css].rotate{
margin:0;
padding:0;
position:absolute;
top: 48px;
top: 0\9; /* IE8 and below */
left: -48px;
left:0\9; /* IE8 and below */
background:#ccc;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progidXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
}[/css]

Абсолютно същият проблем като с позицията top Само дето тука ти трябва отрицателен left, за да започне от началото

ДЕМО