Home/ Questions/Q 1104199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T01:27:02+00:00

The layout I’m trying to achieve is shown in this image: The HTML below

  • 0

The layout I’m trying to achieve is shown in this image:
alt text

The HTML below is one of many attempts which haven’t worked. The project this is for is targeting HTML5 in the latest browsers only, so there is no need for it to work in anything except the latest Chrome, Safari, Firefox and (with a following wind) IE9 beta.

<!DOCTYPE html>
<html>
<body>
    <div style="border: solid 1px red; width:600px; height: 600px">
        <span style="-webkit-transform:rotate(-

90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span>
        <img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg"  

style="position:absolute;bottom:600px" />
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I suppose you might want something like this: http://jsfiddle.net/aNscn/3/

    bottom: 600px is going to get you nowhere – that’s just going to put the elements 600px away from the bottom of the user’s screen. Instead, give the outer div a position: relative and let the two elements align to it’s bottom with a suitably low bottom value. Also check out the transform-origin property to get the positioning of the span correct after rotation. 

    #outer {
    border: solid 1px red;
    width:600px;
    height: 600px;
    position: relative;
}

#text {
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: left top;
    -o-transform: rotate(-90deg);
    -o-transform-origin: left top;
    transform: rotate(-90deg);
    transform-origin: left top;
    position: absolute;
    bottom: 0;
    left: 5px;
}

#img {
    position:absolute;
    bottom: 15px;
    left: 30px;
}
    • 0