html - Text overflowing out of Div When using transform: rotate(90.0deg)

Question

here is my Work http://jsfiddle.net/2h8tv/

Here i am using css transform: rotate(90.0deg) . You can see the text coming out of the container. How can solve this without using padding or margin

Answer 1

I think that using transform-origin should be the most proper thing in this case. When you rotate an element with transform: rotate(x), the rotation is done by a specific origin. By default, this origin is set to 50% 50% which is the exact center of the element.
Add the following style to .rotate class

-webkit-transform-origin: 8px 12px;

However, you can make this rule more general:

-webkit-transform-origin: 50% 12px;

First part of the property is vertical position of the origin point. So in this case we set it to middle (50%). The second one defines horizontal position of the origin, so depending on parent div's width we should set it in px.

Answer 2

You have a few options here, obviously just adding padding would be the easiest.

But you can also mess with the transform-origin policy.

transform: rotate(90deg); transform-origin:8px 12px;
-ms-transform: rotate(90deg); /* IE 9 */
-ms-transform-origin:8px 12px /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-webkit-transform-origin:8px 12px /* Safari and Chrome */
-moz-transform: rotate(90deg); /* Firefox */
-moz-transform-origin:8px 12px /* Firefox */
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin:8px 12px /* Opera */

See and example here http://jsfiddle.net/2h8tv/2/

Answer 3

You could use a non-breaking Space  

<div class="orangeblock "><div class="rotate"> &nbsp;Free</div></div>
<div class="yelloblock"><div class="rotate"> &nbsp;$1999</div></div>

Check -> http://jsfiddle.net/2h8tv/1/

Answer 4

If you increase the font-size of .rotate. it will get aligned.