I have rotated the text by 270 degrees and now I am facing the challenge of aligning it within another div.
Here is the original image before I rotated the text:
Below is the code I used for the layout:
#infoside {
background-color: #00ff00;
float: right;
height: 100%;
width: 41%;
}
#tabbings {
float: left;
width: 15%;
height: 100%;
background-color: #ffff00;
}
#tab_panels {
float: right;
width: 85%;
height: 100%;
background-color: #00ffff;
}
#client_info {
height: 100px;
width: 100%;
}
<div id="infoside">
<div id="tabbings">
<div id="client_info" class="active_tabbing">
<div id="text_here" style="width: 100px; height: 25%; text-align: center">
CLIENT INFO
</div>
</div>
<div class="clear"></div>
</div>
<div id="tab_panels"></div>
<div class="clear"></div>
</div>
When I apply the class twist_text to the div with id text_here to rotate the text, the result is shown in the image below
.twist_text {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg) ;
-o-transform: rotate(270deg) ;
-ms-transform: rotate(270deg) ;
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
How can I ensure that the rotated text fits perfectly inside the square?
Thank you.