text-rotating

I'm trying to accomplish this: with this code: <div id='left_column_date_search'> <a href='#' class='a1'><span>Dnes</span></a> <a href='#' class='a2 selected'><span>Zítra</span></a> <a href='#' class='a3'><span>Pátek</span></a> <a href='# 'class='a4'><span>Sobota</span></a> </div> <!-- end: #left_column_date_search --> #left_column_date_search { width: 36px; float: left; overflow: hidden;} #left_column_date_search a { display: block; position: relative; color: #fff; text-shadow: 1px 0px 0px #000; text-decoration: none; } #left_column_date_search a.selected { /* background: url(/images

I don't understand how text rotation works in CSS3. For instance, you can see it here , the rotated text is never on the right location as you want it, right: 0; bottom: 0; it will always have the gap/ margin to the right. and always overrun at the bottom of the box that contain it. How can I fix this? Can I use jquery to fix it or any reliable jquery plugin for text rotation out there ? Thanks. Positioning the text is not very difficult when you realize you can control the rotation point through... transform-origin: 0 0 || top left In your specific case, it works out like this: .year {

How do i rotate text in css to get following output... hi, Edit: Thanks for quick suggestion. I have added my sample code in jsfidle: http://jsfiddle.net/koolkabin/yawYM/ The problem i am facing is that when we rotate the text then it breaks the alignment and positions... so what is causing that and how can i manage them? 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