How to make the parent div adjust in size to contain the CSS-Rotated child div?


Tags: javascript,css,css3

Problem :

The Title says it all: "How to make the parent div adjust in size to contain the CSS-Rotated child div?"

This is what I get currently: enter image description here

HTML:

<div id="container">
    <div id="rotator">
        <h1>TEXT</h1>
    </div>
</div>

CSS:

#container {
  display: inline-block;
  border: 1px solid gray;
  padding: 10px;
  overflow: hidden;
}

#rotator {
  display: inline-block;
  width: 200px;
  height: 500px;
  background-color: rgb(130, 310, 130);
  border: 1px solid blue;
  text-align: center;
  line-height: 500px;

  -moz-transform:rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

Live Example

So, is there anyway to make the parent resize with child? A CSS only solution would be best. If that's impossible, what's the best javascript way to do that? Should support IE9

Based on @misterManSam's suggestion I update the live example to show the solution. found here

enter image description here



Solution :

Change the width of the div.container when rotated. Add negative margin and left margin to #rotator.deg90in CSS.

Look at this example :)

Javascript

function to90() {
   var elm = document.getElementById("rotator");
   console.log(elm);
   elm.className = "deg90";

//add these lines
   document.getElementById('container').style.width = "500px";
   document.getElementById('container').style.height = "200px";
}

CSS

#rotator.deg90 {
  /*add this*/
  margin-top: -150px;
  margin-left: 200px;

 -moz-transform:rotate(90deg);
 -webkit-transform: rotate(90deg);
 -o-transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 transform:rotate(90deg);
}

    CSS Howto..

    How can I center a tooltip below an element that is narrower than the tooltip?

    How to align like-buttons on my website between
    elements and put a white background to them?

    How to control the speed of a SVG line animation with CSS

    Show bottom of an overflow string in a div with fixed height/width?

    How to include .css file in smarty template file?

    How to use Vendor Properties in Multiple Backgrounds?

    How to fill the width under an image with a caption without defining the width of the caption?

    How to link css files to work correctly with wamp server?

    How to I change this css psuedo button in Javascript/Jquery

    How to position this using only CSS and no tables

    How do you show just the first line of text of a div and expand on click?

    How to fix the css red notification bubble

    How to use an image more than one place in CSS

    How to customize unordered list items in HTML using CSS

    UI Challenge - how to draw “connectors” between elements?

    How to input block of text next to Font Awesome icon in CSS?

    How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

    Rails 3: How to prevent image caching when the image is specified in the CSS file?

    How to use a lower resolution image for mobile?

    How to change color of text based on the php condition [closed]

    How to stop these two divs/navbars from overlapping in Bootstrap

    How can I use PHP code in a CSS file

    How to create full height content section with fixed header and footer in CSS with scrollbar hidden if not required [closed]

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    How can I get these two widgets to align horizontally using CSS selectors?

    How to align radio buttons with labels in one line? [duplicate]

    How to use CSS Rotate() in TH Table Tags

    How to set ul width in percent?

    How to load multiple CSS files within a JS script

    Is there a plugin for Wordpress that lets me show HTML/JS/CSS examples? [closed]