Ambient Transformed Element with DIV

Question

I would like to rotate the text element into a DIV, however, after the text rotates my collapsing div, as if it were empty. Is there a css trick for my DIV to still surround my inner element?

this is what my code looks like:

li { border: 1px solid black; list-style-type: none; } p { display: inline-block; transform-origin: right bottom; transform: rotate(270deg); } 

 <li> <div> <p>Some Text</p> </div> </li> <li> <div> <p>Some Text</p> </div> </li> 

Answer 1

Instead of transform: rotate (xdeg); you can use writing-mode to achieve this.

Formal syntax

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-L.R.

Code Repeat: http://codepen.io/gc-nomade/pen/MpNBMa or lower

 li { border: 1px solid black; list-style-type: none; } p { display: inline-block; vertical-align: middle; } p.rotate { writing-mode: vertical-rl; /* for obsolete safari old win, add vendor prefix -webkit- */ writing-mode: tb-rl; /* IEs */ /* writing-mode:sideways-lr; could be the one */ /* use scale() eventually untill sideways-lr is working everywhere */ transform: scale(-1); padding: 1em; background: yellow; /* show me */ max-height:10em; /* will force text to break on several lines if too long */ } 

 <ul> <li> <div> <p class="rotate">Some Text</p> <p>aside <br/>any <br/>other <br/>text <br/>aside <br/>any <br/>other <br/>text </p> </div> </li> <li> <div> <p class="rotate">Some more Text<br/>over 2 lines</p> <p>aside any other text</p> </div> </li> <li> <div> <p class="rotate">Some more Text over 10em of height at the most</p> <p>aside any other text</p> </div> </li> </ul> 

Note: MDN says:

This is an experimental technology. Since this technology specification has not stabilized, check the compatibility table for use in various browsers. Also note that the syntax and behavior of experimental technology may change in future versions of browsers as the specification changes.

Take a look here: http://caniuse.com/#search=writing-mode