Home/ Questions/Q 8128979
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T08:07:05+00:00

I recently read a post online about rotating text with css. This appealed to

  • 0

I recently read a post online about rotating text with css. This appealed to me because, well frankly, I needed to rotate text with css (how cute). The problem is that now I’m completely lost. The rotated element doesn’t seem to be following the layout that I wish it would.

You can visit the page in question http://76.182.31.74:8001/aboutme.html for as long as it is up or take a look at this image here:

enter image description here

As you can see, the words “ABOUT ME” kind of float out of the darker content area. I need them to hug the content in the center (in this case, the picture of me) and be in the gray area (vertically). I’ve tried everything to no avail!

Here are the relevant CSS/HTML snippits:

http://76.182.31.74:8001/styles/default.css

#SideWord {
    display:block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    color: #666;
    text-shadow: 0px -1px 0px rgba(0,0,0,.5);
    font-size:53px;
    position:relative;
    left:-617px;
    text-align:center;
    font-family:Verdana, sans-serif;
}

http://76.182.31.74:8001/aboutme.html

<div id="content">
        <span id="SideWord">
            <!-- InstanceBeginEditable name="SideWord" -->ABOUT ME        <!-- InstanceEndEditable -->
        </span>
        <div id="spacer">
            <!-- InstanceBeginEditable name="content" -->
                <img id="profile-pic" src="images/me.jpg" /><span class="header3">I'M <span class="emph">XANDER LAMKINS</span> AND I'M A TEEN INTERESTED IN <span class="emph">COMPUTER PROGRAMMING</span>, GENERAL <span class="emph">COMPUTER SCIENCE</span>, AND <span class="emph">MATHAMATICS</span>.</span>
                <span class="page-content" style="padding-top:35px;">I've been programming since mid-2005 and have loved every day of it!  I work everyday on hobby projects in all aspects of the computing genre.  I do 3D animations, develop applications, design webpages, and even a little bit of image design.<br />
            <br />I am currently fluent in .NET, Lua, HTML/CSS/JavaScript/jQuery, and Basic.  I am also knowledgable about Python and Java.<br /><br />As of my Junior and Senior year, I will be studying at <a href="http://en.wikipedia.org/wiki/North_Carolina_School_of_Science_and_Mathematics" class="smoothlink">NCSSM</a>, a public boarding school focused on Science and Mathamatics.<br /><br />I'm also very active on the <a href="http://stackexchange.com/" class="smoothlink">StackExchange</a> network.  Feel free to check out my profiles there.</span><a target="_blank" class="se" href="http://stackoverflow.com/users/595437/xander-lamkins">
<img src="http://stackoverflow.com/users/flair/595437.png?theme=clean" width="208" height="58" alt="profile for Xander Lamkins at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Xander Lamkins at Stack Overflow, Q&amp;A for professional and enthusiast programmers">
</a> <a target="_blank" class="se" href="http://superuser.com/users/77306/xander-lamkins">
<img src="http://superuser.com/users/flair/77306.png?theme=clean" width="208" height="58" alt="profile for Xander Lamkins at Super User, Q&amp;A for computer enthusiasts and power users" title="profile for Xander Lamkins at Super User, Q&amp;A for computer enthusiasts and power users">
</a><span class="page-content" style="padding-top:35px;">Contact Me:<br /><span class="emailz"></span></span>
          <!-- InstanceEndEditable -->
        </div>
    </div>

Feel free to request anything else or ask for more information about anything. I just want those darn words to sit next to (to the left of, anyways) the #spacer div with it’s top a distance of x from the top of the grey area.

Feel free to poke through the other pages for as long as they are up.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, there is the transform-origin property that defaults to 50% 50% effectively rotating the element around its center. I’ll be setting it to 0 0 so the element is rotated 90 degrees CCW against its top right corner.

    Fiddled

    Update:

    The original fiddle I’ve posted did not seem to work x-browser in the following aspect: on Firefox, % top-margin^ for the transformed element gets applied after transition, on Chrome/Safari it seems to get applied before the element is transformed (?)

    ^ – For vertical margins percentages refer always to the width of the containing block

    #SideWord {
    /*re-worked deltas only*/
    transform-origin: 0 0;
    /*take element out of normal flow to avoid collapsing vertical margins*/
    float:left;
    /*these values have to account for parent container height or the parent
      needs to have a clearfix applied to it*/
    /*an alternative to setting these dimensions in px would be em, as long as
      as the font size is em-based too. this would give you *some* degree of
      control over pseudodynamic box size*/
    width:300px;
    margin-top:300px;
    /*re-align the text*/
    text-align:right;
}

    This appears to render fine on FF, Chrome and Safari (will check IE next week), plus gives you a bonus of adjusting margin-top to slightly shift text position.

    Re-fiddled

    • 0