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:

htmlcsstextrotation

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

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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verifying the current password and updating the hashed password

I have been struggling with creating a PHP script for updating user hashed passwords. Unfortunately, the script is not functioning as expected and no error messages are being displayed. Every time, it only shows "Your old password is incorrect" message. I ...

phphtmlmysqli

Exploring the div's classes using SCSS

I recently started learning SCSS. I apologize if this question has been asked before, but I couldn't find the exact solution I was looking for. In one of my .erb views, classes are dynamically assigned to a specific div. Here's an example: < ...

csssass

Retrieving HTML content using CURL

Could really use some help with my curl issue: I'm using CURL to connect to a page, then redirecting myself to another page that's only accessible when logged in. How can I retrieve the HTML code from this page? I can see the page displayed, but ...

phphtmlcurlscreen-scraping

What is the trick to getting the <label> and <input> elements to show up side by side in an HTML form?

I am designing a registration form for a new website. My goal is to have each label and its corresponding input element displayed on the same line. Here's the CSS code I'm using: #registration-form { background-color: #FFF; height: 600px; ...

htmlcssforms

Is there a way to extract the text that is displayed when I hover over a specific element?

When I hover over a product on the e-commerce webpage (), the color name is displayed. I was able to determine the new line in the HTML code that appears when hovering, but I'm unsure how to extract the text ('NAVY'). <div class="ui ...

pythonhtmlseleniumbeautifulsoupscrapy

unable to see the new component in the display

Within my app component class, I am attempting to integrate a new component. I have added the selector of this new component to the main class template. `import {CountryCapitalComponent} from "./app.country"; @Component({ selector: 'app-roo ...

htmlangulartypescript

Utilizing browser local storage in web development

Currently, I am in the midst of working on an e-commerce platform, a project that holds significant importance for me as it marks my debut into major projects. For the first time, I am delving into the realm of local storage to manage basket data such as q ...

javascripthtml

What is the best way to position a <label> to the left of an <input> field?

Examining the HTML and CSS code below: * { box-sizing: border-box; } .field { overflow: auto; } .field label { float: left; width: 80px; } .field input { display: block; width: 100%; } <div class="field"> <label>Test< ...

cssformscss-float

Looking to implement a condition that prevents the echoing of HTML code when a certain template ID is selected?

Struggling with inherited PHP MVC code for a website, I encounter an issue on a specific page where unwanted code is echoed out. To prevent this, I aim to skip the echoing when a specific templateID (which I set as default) is selected. However, I'm u ...

phphtmlsql

Issue encountered when submitting form: Error identified as "Unexpected string expression without template curly in string"

As a novice in React.js, I am facing an issue where setState is not functioning properly when submitting a form. Any suggestions on how to resolve this problem? > class Home extends Component{ constructor(props){ > super(props) > ...

javascripthtmlcssreactjs

How to position a div in the center of another div using HTML

I'm struggling to center the bottom div within a container that includes 3 other divs. Despite trying multiple solutions found online, nothing seems to work. This task should be simple, but for some reason, I can't get it right. .container { po ...

htmlcsscenter

Blue outlined React Select dropdown with search functionality

When the dropdown is searchable, there seems to be a blue outline around the cursor: Link to image To remove the cursor, you can use this CSS: .Select-input > input { color: transparent; } Is there a way to also eliminate the blue outline on f ...

cssreactjssassreact-select

Can you tell me the standard CSS easing curves?

When working with css, we have the option to incorporate easing for transitions, like this: transition: all .5s ease-in-out CSS provides predefined easings such as ease, ease-in, ease-out, and ease-in-out. We can also create a customized easing using a ...

csseasing

What is the best way to display numerical data within an inline list format?

Here is a list I have: <ol> <li>Login</li> <li>Address</li> <li>Shipping</li> </ol> The numbers in the list display correctly as decimals. However, when I change the <li> tag to inline or ...

csshtml-lists

The HTML button triggers a function to execute on a different webpage when clicked

I'm facing a straightforward issue that I can't seem to figure out due to my limited experience with Angular and web development. The problem revolves around two components, namely home and dashboard. In the home.component.html file, there's ...

javascripthtmlcssangulartypescript

Is there a way to determine the file size for uploading without using activexobject?

Can the file size of an uploading file be determined using Javascript without requiring an ActiveX object? The solution should work across all web browsers. ...

javascripthtmlfile-uploadfilesize

Add Django template without adding an extra line break

In my main.html template, I have the following code: <p>{% include "pouac.html" %}{% include "pouac.html" %}</p> The file pouac.html contains just one line: <span>pouac</span> When rendered, the main.html template generates two ...

htmlcssdjangodjango-templates

How can I open a new window, redirect the current one, and bring focus to the new window using JavaScript?

Trying to troubleshoot a problem I'm having with the following setup: - Using SAP Portal, I am launching an HTML page containing this code. - The goal is for the HTML page to open a new window. - Once the new window opens, the original HTML page ...

javascripthtmlwindow.open

What is the best way to display grouped items horizontally in an ASP.NET ListView?

My ASP ListView currently displays items vertically in columns with GroupItemCount set to 3: A D G B E H C F I Is there a way to adjust the display so that it groups items horizontally in rows like this? A B C D E F G H I This is the ListVi ...

.netasp.netcsslistviewhtml

Unable to refresh the fullcalendar section following an ajax post click

Currently developing a calendar using fullcalendar. I have created an ajax button that retrieves events from another php page. The first click on the ajax button works fine, displaying a nice month calendar with events. However, my issue arises when I cl ...

javascripthtmlcssajaxfullcalendar