Using CSS to manage the size and placement of text that has been rotated

Here is the HTML code snippet:

<div class="fl">
<div class="titleTextV">My ABC</div>
</div>

After applying CSS to rotate the text:

.titleTextV{
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-size:1.3em;
    background:#999;
    height:100%;
}

The issue is that the titleTextV class should span the entire height of its container at 100%, without using pixel values, and be positioned inside. However, currently the text is moving out of the box.

htmlcss

Answer №1

For those utilizing jQuery, here's a handy tip: 

$('.fl').height($('.titleTextV').width());

Don't forget to include display: inline-block; in your titleTextV class.

Check out this live demonstration on jsFiddle:

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

What is the best way to align two blocks and a span with fixed widths horizontally using CSS?

Is it possible to have a span with a static width of 20px (like col-2) placed between two blocks with content in Bootstrap, where the blocks split the rest of the available space? Here is an example code snippet: https://jsfiddle.net/Alexik/krexqp5m/1 Co ...

htmlcssbootstrap-4

Using jQuery to organize divs into columns

I am working with a parent div that contains 19 child divs all with the same class, structured like this: <div id="dropdown-content1"> <div class="CatsColumn"></div> <div class="CatsColumn"></div> <div class="C ...

jqueryhtmlcss

Creating a three-column layout with position fixed in the center

I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...

htmlcss

Data in MySQL only displaying the most recent entries

I am currently working on a project where I need to retrieve data from a database table and display it on a website. However, I am facing an issue where only the last row of the table is being displayed. This table is simply for testing purposes as I try t ...

phphtmlmysql

What is the best way to create a scrollable panel that spans the entire screen and stops just at the footer in a mobile interface using responsive design?

I am working on optimizing my result pages for mobile devices to ensure they are responsive across all screen sizes. However, I am struggling with making the scrollable panel fill the screen down to the footer consistently on all mobile devices. Setting a ...

csshtmlbootstrap-4

What is the best way to accomplish this task - through JavaScript or another method?

Stumbling upon this website, I was instantly captivated by the navigation bar. Check it out at www.webdesignerwall.com The rollover effect on the "Home," "About," and "Jobs" options when you hover your mouse is just fantastic against the brown backdrop. I ...

javascriptcssrollover

It appears that WebClient.DownloadString has a tendency to alter certain aspects of the HTML code retrieved from an external website

I have a website built with ASP.NET (.aspx) that I access from an ASP.NET MVC 4 mobile site (.cshtml) to retrieve its HTML response string. Both sites are hosted on a Windows Server 2008 R2 system and were developed using VS2010 Professional. -When direct ...

asp.nethtmlwebclient

vertically centering a div specifically on laptops

What is the best way to vertically center a div on lap-tops? (...) body {padding: 4% 16%;} body {top:0px; left:0px; bottom:0px; right:0px;} body {border: 12px solid darkred; border-style: double;} body {background-color: #FAFCB4;} p {font-size: 80%; text- ...

htmlcss

Tips for verifying the existence of a row with a specific id using jQuery

Is there a way to use jQuery to verify if a table contains a row with a certain id? ...

javascriptjqueryhtmljsonasp.net-mvc-3

Struggling with adjusting the color scheme on a specific page of my WordPress website

Currently, I'm attempting to customize the colors of my user profile page located at www.wastelandgamers.com/user-profile. My goal is to transform the blue fields into white and change the text within those fields from white to black. While I can ach ...

csswordpress

Unique WordPress page with distinct logos

How can I display a different logo for a specific page on my WordPress site? I am using the default Logo theme, but I need to replace the logo for a particular page. Below is the code that controls the logo display in the theme file: <a href="<?ph ...

phpcsswordpressheader

Create a form using Node.js

Currently, I am facing an issue while attempting to post data from a form in node JS and then view the data in console. Upon clicking the submit button, the data appears in the console as expected. However, the website continues to load indefinitely with t ...

javascripthtmlnode.jsejs

Increasing a hyperlink to the surrounding container

I am currently working on a design that involves a button with multiple options. Here is the CSS code for the button: .menu-main-window { position: absolute; top: 5px; bottom: 5px; left: 0px; right: 0px; font-size: 0; } ...

htmlcss

Why do we often set media queries at 500px or smaller when most phones have screens larger than that?

When it comes to designing websites, media queries are commonly used to ensure a responsive design that adapts well to different devices. However, I've noticed that many of these media queries use min-width with relatively small values like 768px or 9 ...

htmlcssresponsive-designmedia-queriesresponsive

Tips for incorporating css @keyframes within a cshtml file:

My cshtml page includes a Popup that I created, but I encountered an issue with keyframes. When I tried to use it without keyframes, the fade effect was lost. I am looking for a way to fix my @keyframes. (I tested the code on Chrome and Opera) I found the ...

javascripthtmlcss

Is it possible to utilize jQuery to add 'a' attributes in HTML5?

Here is a snippet of code that works with Chrome and Firefox browsers: HTML: <a id="savefile""> Save transferred file </a> Javascript: // event is returned by a readAsDataURL() var save = document.getElementById('savefile'); s ...

javascriptjqueryhtml

Toggle the frequently asked questions feature by including a selector

I am trying to create a toggle FAQ feature. When the user clicks on the "+" symbol, it should expand and collapse the answer. I want to implement toggling functionality when clicking both the "+" symbol and the question title. Question: How can I toggl ...

javascriptjqueryhtml

Safely render user-generated HTML content within a React application to prevent cross-site scripting vulnerabilities

A unique situation has arisen in our React app where a user inputs a string that is displayed to other users. The challenge lies in searching for specific characters within the string and replacing them with HTML elements. For example, transforming the wor ...

javascripthtmlreactjs

What is the best way to create a unique shadow effect for a container in Flutter?

I am facing a challenge with my screen layout that uses GridView.builder with crossAxisCount: 3. In the itemBuilder, I am returning a Container with shadows on the left, right, and bottom, but so far, I have not been able to achieve the desired outcome. H ...

cssflutterdartcontainersshadow

Prevent floating labels from reverting to their initial position

Issue with Form Labels I am currently in the process of creating a login form that utilizes labels as placeholders. The reason for this choice is because the labels will need to be translated and our JavaScript cannot target the placeholder text or our de ...

javascriptjqueryhtmlcss