CSS3 Vertical text banner to left of content

Question

I am no guru when it comes to CSS and I wanted to create a web page layout using CSS only if possible. The layout that I would like is to have two divs, one containing a banner and the other containing the content of the page with the banner to the left of the content. So far easy enough. The banner div contains two sub-divs, one containing the title of the page and the other containing some extra information such as contact information. Once again, not too hard.

The problem arises when I want the text displayed in the title to be vertical, reading from bottom to top. I did some searching around on the web and found the CSS3 transform rotate functionality which does what I want it to do.

#name {
  border: solid 1px black;
  background-color: yellow;
  height: 50px;
  font: normal normal bold 40px Helvetica, Arial, sans-serif;
  padding: 10px;
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(270deg);
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(270deg);
  -ms-transform-origin: left bottom;
  -ms-transform: rotate(270deg);
  -o-transform-origin: left bottom;
  -o-transform: rotate(270deg);
  transform-origin: left bottom;
  transform: rotate(270deg);
}

Unfortunately, when it comes to rendering the text in the browser, the space reserved by the browser for the rotated text is the width of the banner text before it was rotated, and not the width of the text after rotation (i.e. the height of the banner text before rotation). Hence my content div is sitting way out on the page when I would like it to be right next to my banner div.

To see what I mean, check out this JSFiddle.

How do I get the two divs to live side by side?

This doesn't haven't to be a purely CSS solution as I think I may have to use JavaScript/jQuery to calculate widths and heights etc. and then move the banner div accordingly, but a pure CSS solution would be nifty.

have you tried adding `float: left;` to `#name` and `#info` ? — LorDex, Oct 15 '13 at 09:08
have you tried fiddling with the position, such as making it `position:relative;`? then you can inform the div where it needs to be in relation to the previous element... — Amber, Oct 15 '13 at 09:09

score 0 · Answer 1 · answered Oct 15 '13 at 09:33

0

here's a fiddle: http://jsfiddle.net/sijav/UDfZE/53/ you should do this, make a max-width for #banner,

max-width:170px;

then put display:block-inline to main content too, that should do the trick.

answered Oct 15 '13 at 09:33

Sijav

1,525
17
21

Unfortunately the length of the `#name` then gets shortened. I want it to be all on one line. – Maugan Stevens Oct 16 '13 at 02:33
@MauganStevens I can't undrestand what you're saying, the length of #name is not getting any shorter? would be more clearify on exactly what do you want? – Sijav Oct 16 '13 at 08:41
What I want is a single line of text in #name, not matter how long it is, and rotated so that it is vertical as described originally. Sorry if that was a bit unclear. When the max-width is set to 170px, then the containing div forces the text within it to wrap. – Maugan Stevens Oct 18 '13 at 10:44
@MauganStevens you can use white-space:nowrap; in your #name css. – Sijav Oct 23 '13 at 02:42

score 0 · Answer 2 · answered Oct 15 '13 at 10:12

0

http://jsfiddle.net/UDfZE/55/

float: left

Altered the above fiddle floating one element right the other one left will have them alongside each other.

answered Oct 15 '13 at 10:12

Crouch

846
3
17
32

CSS3 Vertical text banner to left of content

2 Answers2