Ways to correct the issue of multiple <div>s overlapping each other after being rotated by 90 degrees

Can someone assist me with rotating multiple divs without them overlapping? Below is a simplified version of my code:

<div>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
 </div>

In terms of styling:

.rect{
height:11cm !important;
width:15.2cm !important;
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-moz-transform: rotate(90deg);   /* Firefox */
-ms-transform: rotate(90deg);   /* IE 9 */
-o-transform: rotate(90deg);   /* Opera */
transform: rotate(90deg);
}

Currently, the divs are overlapping each other and leaving the left side of the page empty. Is there a way to prevent overlap and align them neatly in the top-left corner of the page?

htmlcss

Answer №1

Why rotate individual inner divs when you can simply rotate the parent div directly?

Check out this codepen link for an example

<div class="rectwrapper">
    <div class="rect">ABCD</div>
    <div class="rect">ABCD</div>
    <div class="rect">ABCD</div>
 </div>




  .rectwrapper{

-webkit-transform: rotate(90deg); /* Safari and Chrome */
-moz-transform: rotate(90deg);   /* Firefox */
-ms-transform: rotate(90deg);   /* IE 9 */
-o-transform: rotate(90deg);   /* Opera */
transform: rotate(90deg);
  display: flex;
}

.rect {
  background: green;
  border: 2px solid brown;
  height:11cm !important;
width:15.2cm !important;

}

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

Is it possible to manually trigger a version change transaction in IndexedDB?

I have been working on a Chrome extension that uses the IndexedDB to store data client-side in an IDBObjectStore within an IDBDatabase. The data structure requires users to be able to modify the object store freely, such as adding new objects or modifying ...

javascripthtmlgoogle-chrome-extensiondom-eventsindexeddb

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Within the mosaic (div #mosaique) are various div elements. My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in t ...

javascriptjqueryhtmlcssselector

What methods can I employ to utilize the name attribute for POST requests instead of the ID attribute in TinyMCE?

My inline TinyMCE form sends content to qry.php with the key "edit_me". I prefer the default behavior of sending content using the name attribute instead. <script type="text/javascript"> tinymce.init({ selector: '#edit_me', ...

phpjqueryhtmlajaxtinymce

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The results so far Expected outcome Please advise me on how to incorporate two ng-repeats within one td. When I use a span tag afterwards, the expected result is not achieved. I have used one ng-repeat in the td and the other in a span tag, which is why t ...

javascriptjqueryhtmlangularjs

Troubleshooting Issue with Importing File into CSS Document

I'm currently working on building a website and I've been trying to import an image to use as the header. I want to add this .png picture to my CSS file, but despite extensive research and double checking everything, I still can't figure out ...

htmlcssimagefilepath

What steps are involved in creating a webpage cleaner similar to Arc90's Readability or Instapaper?

Curious about cleaning up an HTML page to present it in a more polished manner - eliminating clutter and restructuring the main text for better readability, similar to resources like or Instapaper. Would the process involve basic page parsing and filteri ...

htmlparsing

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div ...

javascriptjquerycss

How can I use Bootstrap and PHP to style future posts in separate rows on a website?

I am attempting to design a categories navigation menu using Bootstrap 5. It consists of two columns, the first displaying featured posts and the second showing 5 recent posts. Here is an example of what I have tried, but it didn't work as expected b ...

phpcsstwitter-bootstrapbootstrap-5

My webpage is experiencing issues with function calls not functioning as expected

I have created a select menu that is integrated with the Google Font API. To demonstrate how it works, I have set up a working version on JSBIN which you can view here. However, when I tried to replicate the code in an HTML page, I encountered some issues ...

javascripthtmljsongoogle-font-api

Is it possible to implement the SCSS CSS preprocessor in Angular 1.6.6, even though it is already utilizing LESS as the current CSS preprocessor?

Is it necessary to compile SCSS and Stylus files into CSS before importing them into my Angular version 1 app? Are there any other alternatives available? Context: I have two applications, one using Angular 4 with SCSS and the other using Angular 1 with L ...

cssangularjssassless

In the realm of HTML Canvas, polygons intricately intertwine with one another

Currently, I am attempting to create multiple polygons from a large JSON file. Instead of being separate, the polygons seem to be connected in some way. https://i.sstatic.net/Ce216.png The project is being developed in next.js. Below are the relevant co ...

cssreactjsnext.jshtml5-canvaspolygon

Replace the icon in Material UI Stepper for steps that have errors

I am utilizing Material UI's Stepper component to display a checklist in this manner. The image below is from their documentation. https://i.sstatic.net/KfUos.png While attempting to add an error state to the checklist, I discovered a prop called er ...

javascriptcssreactjsmaterial-uifont-awesome

Using JavaScript to calculate dimensions based on the viewport's width and height

I have been trying to establish a responsive point in my mobile Webview by implementing the following JavaScript code: var w = window.innerWidth-40; var h = window.innerHeight-100; So far, this solution has been working effectively. However, I noticed th ...

javascriptcssviewport

Having trouble populating and submitting a selected option from a dropdown menu in Angular?

Upon loading the page, the Category dropdown automatically populates with data from the database. However, when I attempt to select a value from the dropdown and click a button to post the data to a specified URL, an error occurs: ERROR Error: Error tryin ...

javascripthtmlangulartwitter-bootstrap

I would like the background image to perfectly fit the dimensions of the parent container

https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...

htmlcssbootstrap-5

What's the most effective method for implementing a stylesheet through Javascript in a style switcher?

I've been tackling the challenge of creating a style switcher for my website. Through utilizing .append() and if and else statements, I managed to make it work successfully. Take a look at the code below: HTML <select name="active_style" id="lol" ...

javascripthtmlcssperformance

Learn the best practices for incorporating jQuery and other JavaScript libraries in your Angular2 projects

Is it possible to integrate a demo showcasing Bootstrap carousel with CSS3 animations in Angular2 using HTML, CSS, and JS? I have created my own implementation in Plunker with Angular2, but I am facing issues with the animated inner content of the carousel ...

javascripthtmlcssanimationangular

Customizing color schemes of bootstrap buttons and dropdown-toggle elements

My button group looks like this: HTML <div class="btn-group"> <button type="button" class="btn btn-default btn-xs red-outline-button"> Sync </button> <button type="button" class="btn btn-default btn-xs gold-outline-button" da ...

htmlcsstwitter-bootstrap

Achieving right-aligned buttons in Bootstrap

Is there a way to align a button to the left inside a div that has the class justify-content-center applied? Here is the code I tried: <div class="card-header justify-content-center"> <div> <div class="ml-5"> Text i ...

cssangularjsbootstrap-4

Incorporate Error Text Spacing in Input Group Design

I'm currently working on developing a method to incorporate space for error messages within my form input group component. The main objective is to prevent any displacement of elements on my forms when displaying error messages. In this scenario, it ...

htmlcssvue.jsbootstrap-4