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 to align images and text in css?

    IcoMoon App icon fonts are shown as 

    HTML/CSS Fluid Grid: How to overlay div to another div

    CSS: How to select first element in each row?

    How to achieve following graphics via css

    How to do HTML/CSS form helpers/popover

    How to align images in a mosaic style? html/css

    How to trim off Image in CSS?

    Show Child Div Above Elements on Parent Div Level using z-index

    How would use span to create different styles between selected characters and the rest?

    How to dynamically change CSS elements to be HTTPS or HTTP

    CSS Sprites - How to hide the balance portion of the image

    How to call and hide lists using two buttons - using Javascript HTML CSS?

    How to make a button light up on hover with twitter bootstrap

    how to remove element.style in css

    Fullpage.js: How to add css class “active” to slide anchor

    How to import the css file by media queries by condition [duplicate]

    How can I center a figure with caption?

    How to change the value depend on css animation?

    How to Style Specific Element On Hover With CSS?

    How to create custom buttons with arrows for twitter bootstrap?

    How do I remove the side padding in the following case?

    How to change label color with html and CSS without js?

    How to display visual rows and cols in textarea using css

    how to set background image in css at MVC4

    How to reference CSS file in a javascript only class

    How does Media Queries Reacts

    How to animate this function?

    How can

    be centered and justified?

    How to stop default CSS in asp.net [closed]