Text rotation adds a line brake to h3

I have a problem with my css and don´t know how to fix it, I been trying many solutions but nothing seems to work, you can see what I am talking about here

http://www.republica-tecnologica.com/tests/

(don´t pay attention to the colors, they are just for my reference)

I have added small tabs on the left and right of the page, each will contain an h3 tag so I am trying to format them so they are rotrated, if you look at the link you will know what I am talking about.

The problem is that when I apply that, it will add a line brake between words, so the text that you see in the page is “this text” and for some reason a line brake is being added between this and text, also I chose text-align:center; and is not doing it, can someone help me out???

This stuff is tricky, but you could try something like:

div#features div#features_left h3 {
  display: inline;
}

or

div#features div#features_left h3 {
  white-space:nowrap;
}

But that still leaves the text sticking out of the box. Perhaps one way to fix that would be

div#features div#features_left h3 {
  -moz-transform: rotate(-90deg);
  color: red;
  [COLOR="Blue"]display: inline;[/COLOR]
  [COLOR="Red"]position: relative;
  bottom: -40px;[/COLOR]
  text-align: center;
  vertical-align: middle;
}

Someone else will come in with a better answer soon, so sit tight. That’s just to get you thinking. :slight_smile:

Thank you, I had used that inline, but that messed up the text also, and I also tried adding wordspacing and character spacing which did not work either

How about something like this:


div#features div#features_left h3 {
    color:red;
    text-align:center;
    vertical-align:middle;
    /* Safari */
-webkit-transform: rotate(-90deg);
    /* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
[B]    line-height: 120px;
    margin: 0 0 0 -45px;
    text-align: center;
    white-space: nowrap;
    width: 120px;[/B]
}
[B]div#features div#left-top-tab:hover h3 {
    width:200px;
    line-height:200px;
    margin:0 0 0 80px
}[/B]


Thank you, that definitely does the trick, I am not using the hover part though, because when you hover over the tab, the h3 pushes to the left putting it out of the mouse hover range which in return has no effect over it.

Do you know how I can push the content of the div further to the right? basically I have this setup


<div>
<h3>
some header
</h3>
some text
</div>

As you can see there is a div containing the header and then some text, however you can see the “some text” ion the tab, which does not look good, I tried pushing it by applying the full height to the h3 but that does not seem to be working, also if I try using display:none and change it on hover it will also hide the h3 and the tab

okay, so I am starting to feel retarded, I just applied those sewttings you gave me to the whole div, and then reverted them when the div is hovered, thank you again.