What is the best way to completely manipulate the rotation of a <div>?

Does anyone have a solution for controlling the rotation of a div using CSS?

I've been grappling with this issue for some time now, but I can't seem to find a proper fix. Whenever I try to rotate a div within a table cell, the width of the cell goes haywire, depending on the length of the text inside.

Currently, I'm stuck with the code below, although I've experimented with other methods as well.

My goal is to decrease the width of the left cell and adjust it according to the font, creating more space.

This is what my CSS looks like:

.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode: lr-tb;
}

And here's the HTML I'm working with:

<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">C</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f161119103f1e130a191e101551160b">[email protected]</a>
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>

javascripthtmlcsshtml-tablecenter

Answer №1

When you encounter this issue, it's because the layout engine first determines the width of the element before applying the transformation. An easy workaround for this is to add a negative horizontal margin:

.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode: lr-tb;
    margin: 0 -1.5em;
}
<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">CLIENTE</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e980878f86a988859c8f888683c7809d">[email protected]</a>
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>

Answer №2

A table with 1% width contains a paragraph that can be rotated easily. However, adjustments to margin and padding for the center class may be necessary when there are more or fewer characters.

.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
    margin: 0 -1.6em;
}
<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">CLIENTE</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2940474f466948455c4f48464307405d">[email protected]</a>
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>

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

JavaScript function implemented to add query parameters to HTTP requests

While reviewing my Google Analytics data, I noticed some recurring requests with a script in the query parameter. The format looks something like this: /about?RaNDMPRMz='-function(){debugger}()-">\"><scrIpt>debugger</scrIpt>< ...

javascriptdjangohttp

I'm curious, what is the exact function of ...state?

Just dipping my toes into NgRx (redux) within Angular and I'm a bit puzzled by the use of ...state in the code snippet below. My understanding is that it functions as spread operator, but I can't grasp why the data attributes from the Interface S ...

javascriptangularngrx-store

(Build an Angular, TypeScript Application) Develop a new function using a string that includes an if statement without using the eval function

Is it possible to create a new function from a string that includes an if condition? The actual string will be provided externally, but for the sake of this example, everything is hardcoded. let f1: number = 1; let f2: number = 0; let condition: string ...

javascriptangularif-statement

What's the best way to add line numbers to source code on an HTML webpage after parsing?

I am currently working with AngularJS and MongoDB. In my MongoDB data, there are some text elements that contain a \n, causing each line to be displayed on a new line based on the occurrence of \n. However, I also want to add line numbers to each ...

javascripthtmlcssangularjs

Try to showcase the contents of a JSON file

Below is the JSON data that I need to reference: { "webservice_status": { "status": "SUCCESS", "message": "" }, "dailyroster": [ { "webservice_status": null, "recordNumber": "3014973", "first_date": "2016-04-27", ...

javascriptjqueryjson

Utilizing the js-yaml library to parse a YAML document

Currently, I'm utilizing js-yaml to analyze and extract the data from a yaml file in node js. The yaml file consists of key-value pairs, with some keys having values formatted like this: key : {{ val1 }} {{ val2 }} However, the parsing process enco ...

javascriptnode.jsjsonparsingyaml

What is the best way to transfer data from a component to a .ts file that contains an array?

I am currently developing a budgeting application and I have a component that is responsible for holding values that I want to pass to an array stored in a separate file. While I can retrieve data from the array, I am facing difficulty in figuring out how ...

javascriptangulartypescript

Pikabu's Uphill Battle with Heights

I'm currently in the process of developing a new off canvas mobile menu for a website project to replace an outdated and faulty version. After some research, I have decided to use https://github.com/mobify/pikabu as it meets all my requirements. Howev ...

javascriptjquerycss

Is there a way to determine the origin of a CSV file shared through a GitHub link?

I'm a beginner on Github and I need help figuring out how to trace back the origin of this CSV file: https://raw.githubusercontent.com/datasets/covid-19/master/data/countries-aggregated.csv Can someone guide me on how to locate where it was uploaded? ...

htmlpandasdataframecsvgithub

Not getting expected response from Angular 5 HTTP request

My HTTP calls are not firing as expected. I have set up the call in the subscribe method of route params. Strangely, the call only triggers on full page reload or when I first click a button to change the route. After that initial trigger, the call doesn&a ...

javascriptangularapihttp

Using Firebase Realtime Database, this React dropdown menu is populated with options in real-time. Combining the features

I'm currently facing an issue with a dropdown that is supposed to loop through data fetched from the Firebase realtime database. The goal is to assign a selected value to a Formik form for saving it to another object in the database. In my database, ...

javascriptreactjsfirebasematerial-uiformik

Why isn't my easypie number displaying on the inside?

I am currently utilizing the easypie plugin, but I am facing an issue where the number is not displaying inside the pie chart. Despite trying multiple solutions, I haven't been able to resolve this. How can I successfully display the number inside the ...

jqueryhtmlcsseasypie

Positioning images within a relatively positioned div using absolute positioning

I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...

htmlcsscss-position

Utilizing AngularJS to display a list of data on a Flot bar chart by triggering a click event

I am relatively new to utilizing angularjs and flot bar chart functionalities. Currently, I am attempting to exhibit filtered data in a curated list upon clicking, based on specified filters. To accomplish this, I have developed a personalized directive ...

javascriptjqueryangularjsflotangularjs-ng-show

"Divs are now linked and drag as one cohesive unit instead of

As I was experimenting with making images draggable and resizable, I encountered a small issue. When I attempted to drag two or more images, they would merge into one large draggable object instead of remaining separate. My goal was to make each image drag ...

javascriptjqueryhtmlcssjquery-ui

Incorporate a Vue component into a string for seamless integration with Buefy's confirmation feature

Can a vue component be loaded into a string for use with buefy confirm? I attempted the following approach, but it did not work as expected: archiveChannelPrompt () { const archiveChannel = document.createElement('template'); new Vue({ ...

javascriptvue.jsbuefy

Once the Ajax request is finished, the cookie deletion function ceases to function

When the website loads, a cookie is generated using PHP before any other content or headers are sent. This is done with the following code: $steam_login_verify = SteamSignIn::validate(); if(isset($_COOKIE['userid'])) { //work with cookie va ...

javascriptjqueryajaxcookies

What is the precise mechanism behind the functioning of rails respond_to feature?

Currently, I'm in the process of developing an application that requires a remote form feature. As I work on this, I've realized that I have never fully grasped how Rails' respond_to function operates. Let's consider the code snippet b ...

javascriptruby-on-railsajax

A step-by-step guide to activating multi-selection in the Primary SideBar of Visual Studio Code using your custom extension

Currently, I'm in the process of developing an extension for Visual Studio Code where I've added a new activityBar containing treeViews that showcase information pulled from a JSON file. My goal is to enable users to multi-select certain displaye ...

javascripttypescriptvisual-studio-codevscode-extensions

Can a props be retrieved and passed as an argument to a function?

My goal is to retrieve a prop from MapsStateToProps using react-redux's connect and then pass it to a child component. This prop serves as an argument for a function, which in turn returns something that becomes the state of the child component. Alth ...

javascriptreactjsreduxaxiosreducers