jamesdoe jamesdoe - 1 year ago 55
CSS Question

Vertical text and div blocks with CSS

On the dashboard page of my website I am attempting to create section blocks with different background colors labeled with vertical text. Similar to this JSfiddle here: http://jsfiddle.net/afpn2y19/4/

<div id="outer">
<div id="inner">
//Rotate? I'm totally lost.

The issue I am working with now is having the color block extend from where the vertical text ends to the other side of the page.

Ideally I want the styling of the vertical label and the corresponding block of text to not become completely ruined when the user resizes their window or when more text is dynamically populated into the color block.

Something like this is what I want to achieve in the end:

Answer Source

I'm not 100% clear on your problem. If your problem is it breaking on resize, etc, and if position: absolute works in your layout, this worked for me:

.rotate {
  position: absolute; // Changed.
  transform: translateX(0%) translateY(190%) rotate(-90deg);
  float: left;
  width: 50px;
  font-size: 25px;

.right {
  float: left;
  background-color: lightgray;
  height: 300px;
  width: 90%;
  margin-left: 50px; // Changed. Width of .rotate