css challenge when rotating (transform:rotate) blo

Question

I've a little problem with block rotated 90 degrees using css transform.

Challenge lies in the following:

Rotated block is inside 40px vertical column. This means that width of the rotated block in auto mode is not more than 40px. So chunk of text is not placed on one continues line, instead line breaks appear.

To better visualise this problem please check this fiddle I created: http://jsfiddle.net/F7CEX/

#open_nav {
    font-family: 'Exo', sans-serif;
    font-weight: 300;
    font-size: 1em;
    display: block;
    color: #333333;
    text-decoration: none;
    background: url("img/menu-s.png") no-repeat 18px -30px transparent;
    padding-left: 50px;
    padding-right: 19px;
    line-height: 40px;
    position: absolute;
    bottom: 18px;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 20px;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: 20px;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: 20px;
    -o-transform: rotate(-90deg);
    -o-transform-origin: 20px;
    transform: rotate(-90deg);
    transform-origin
}

I simply need this text to be a one liner. Any ideas?

Answer 1

Just remove the Position attribute from CSS:-

#sidebar-small {
width: 40px;
height: 100%;
left: 0;
top: 0;
}

Answer 2

I think we can solve the problem by using the below styles

#sidebar-small {
height: 250px;
left: 0;
position: fixed;
top: 0;
width: 250px;
}

In the above styles we can give width as 100% also in case we want the header to be occupying the whole screen.

#open-nav{
bottom: 8px;
left: 10px;
position: absolute;
color: #333333;
font-family: 'Exo',sans-serif;
font-size: 1em;
line-height: 40px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 20px;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 20px;
-o-transform: rotate(-90deg);
-o-transform-origin: 20px;
transform: rotate(-90deg);
transform-origin: 20px;
}

The above styles are for the anchor tag.

Answer 3

If this is what you want

fiddle

Here's the css only added white space. It comes in continious line. If m missing some point then please clear

Here's the css

#sidebar-small {
width: 40px;
height: 100%;
position: fixed;
left: 0;
top: 0;
}

#open_nav {
white-space:nowrap;
font-family: 'Exo', sans-serif;
font-weight: 300;
font-size: 1em;
display: block;
color: #333333;
text-decoration: none;
background: url("img/menu-s.png") no-repeat 18px -30px transparent;
padding-left: 50px;
padding-right: 19px;
line-height: 40px;
position: absolute;
bottom: 18px;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 20px;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 20px;
-o-transform: rotate(-90deg);
-o-transform-origin: 20px;
transform: rotate(-90deg);
transform-origin: 20px;
}

Check and let me know if I am missing some thing