Creating Vertical Text and Div Blocks using CSS

Question

Creating Vertical Text and Div Blocks using CSS

Trying to set up different color section blocks with vertical text on my website's dashboard page. Similar to this example in JSfiddle: http://jsfiddle.net/afpn2y19/4/

<div id="outer">
    <div id="inner">
        //Feeling lost - how do I rotate?
    </div>
</div>

The challenge I'm facing is making the color block span from the end of the vertical text to the other side of the page.

My goal is for the styling of the vertical label and text block to remain consistent even when the window is resized or more text is added dynamically.

I envision the final result looking like this: https://i.sstatic.net/n8y1K.png

html css text rotation

Answer 1

Answer №1

It seems like there may be some confusion regarding your issue. If the problem arises during resizing or if using position: absolute fits your design, then you can try the following solution that worked for me:

.rotate {
  position: absolute; // Updated.
  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; // Updated from the original code. Adjusted to match .rotate's width
}

Answer 2

It seems like there may be some confusion regarding your issue. If the problem arises during resizing or if using position: absolute fits your design, then you can try the following solution that worked for me:

.rotate {
  position: absolute; // Updated.
  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; // Updated from the original code. Adjusted to match .rotate's width
}

Answer 3

Answer №2

After much trial and error, I finally found the solution that did the trick:

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

.right {
float: left;
background-color: grey;
margin-left: 50px;
width: 100%;
}

#outer {
overflow: hidden;
background-color: lightgrey;
margin-top: 10px;
}

Answer 4

After much trial and error, I finally found the solution that did the trick:

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

.right {
float: left;
background-color: grey;
margin-left: 50px;
width: 100%;
}

#outer {
overflow: hidden;
background-color: lightgrey;
margin-top: 10px;
}

Answer 5

Answer №3

Seems like the issue lies in your widths and floats not cooperating well together. I've made some adjustments using percentages to reach the desired outcome you're aiming for: http://jsfiddle.net/xownzsyo/22/

.container{
  background-color: darkgray;  
}

.left-column{
  float:left;
  width:15%;
}

.rotate {
 transform: translateX(0%) translateY(190%) rotate(-90deg);
 font-size: 25px;
}

.right-column {
  height: 300px;
  width:85%;
  float:left;
  overflow-y:scroll;
  background-color: lightgray;
}

.right-column p{
  padding: 0 20px;
}

You might want to explore using bootstrap for more efficient responsive columns with less code and styling.

Answer 6

Seems like the issue lies in your widths and floats not cooperating well together. I've made some adjustments using percentages to reach the desired outcome you're aiming for: http://jsfiddle.net/xownzsyo/22/

.container{
  background-color: darkgray;  
}

.left-column{
  float:left;
  width:15%;
}

.rotate {
 transform: translateX(0%) translateY(190%) rotate(-90deg);
 font-size: 25px;
}

.right-column {
  height: 300px;
  width:85%;
  float:left;
  overflow-y:scroll;
  background-color: lightgray;
}

.right-column p{
  padding: 0 20px;
}

You might want to explore using bootstrap for more efficient responsive columns with less code and styling.

Creating Vertical Text and Div Blocks using CSS

Answer №1

Answer №2

Answer №3

Similar questions

The correct usage of && and || operators in javascript

Content in TinyMCE styled with the default CSS of the application

Ways to alter the color of individual pseudo elements using a CSS loop

Having difficulty implementing a hover event on a sibling element of a target using either the duration parameter in jQuery UI or CSS

What is the best way to launch a Popup window that spans from the top to the bottom of the screen?

The mobile screen size shortcuts are malfunctioning, while the regular links are functioning properly

Tips for creating an expandable div with floated content

Having difficulty in setting a Cookie with php

methods to locate the parent element of an element with selenium

Dealing with HTML fields that share the same name in various positions can be tricky

What causes an image background to take precedence over the background color of Bootstrap buttons?

Providing access to information even in the absence of JavaScript functionality

Lines are showing up on the screen, but their origin within the html or css remains a

Various methods for deactivating controls in a CSS class

The issue of CSS not functioning properly across various page sizes

Displaying a loading spinner image as PHP script runs

JavaScript does not function properly with dynamically loaded content

Toggle the jQuery class off when a different element is chosen

Tips for anchoring a row to the bottom of a Bootstrap webpage

Achieving equal height for the englobing/parent div and the inner divs