ansaurus

Question

Trying to get vertical text to bottom align

Answer 1

+1 A:

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;
}

Yi Jiang 2010-10-01 09:13:23

Wow, that works. Very impressive. Just one thing though -- the left:30px on the image assumes the width of the text. Is it not possible to make the image float to the right of the text automatically?

Nestor 2010-10-01 09:21:26

@Nestor Not really, not with this approach at least, though you can try using `em` units instead if that helps.

Yi Jiang 2010-10-01 09:47:22

Thanks so much.

Nestor 2010-10-02 01:41:59

ansaurus

tags:

views:

answers:

Trying to get vertical text to bottom align

related questions