I am looking for a way ONLY in CSS to adjust the height of a container <div>
tag whenever one of its children have been rotated. I am very much aware (and can totally implement) a solution for this using JavaScript, but I was hoping to find a CSS solution.
This fiddle shows my quandary: http://jsfiddle.net/spryno724/yX56u/
HTML:
<div class="container">
<p>Test</p>
<img class="rotate" src="https://tse1.mm.bing.net/th?id=HN.608054218431465781&pid=1.7" />
</div>
CSS:
.container {
border: 1px solid red;
overflow: auto;
position: relative;
width: 100%;
}
.rotate {
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
position: absolute;
top: 160px;
}
Does anyone have any insight as to how to have the container automatically adjust its height regardless of the rotated object's natural height or rotation amount?