Databases
StackOverflow2013
Postsdbo
POCSS Divs and Text Rotation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Divs and Text Rotation
    text
    copied!<p>I've been battling with the following layout and can come close but either my divs are correct and my text is misplaced or vice versa. Here's what I want, imagine that's a maximized browser...</p> <pre><code>+----------------------------+ | |#| |@@@@| |&amp;| | | |#| |@@@@| |&amp;| | | |#| |@@@@| |&amp;| | | |#| |@@@@| |&amp;| | | |#| |@@@@| |&amp;| | +----------------------------+ </code></pre> <p>The entire page has a white background. Then I simply need three divs that are colored each the same color, black for example, 100% height. So in my lame ASCII art drawing, the first div is the "column" filled with '#' symbols, the second div is the column filled with '@' symbols and the third div is the column filled with '&amp;' symbols.</p> <p>Over the middle column ('@' symbols) I want to layer a piece of text over it that is rotated 270 degrees. Just a single one line string 10 characters in length, centered vertically and horizontally (or even just horizontally is fine).</p> <p>Here's my CSS - keep in mind there is junk in here as I went through many renditions before posting. Again, I can get my divs easy enough but then the text is wrong or if I get the text correct the divs wrong.</p> <pre><code>.container-left { height: 100%; background-color: #000; display: inline-block; margin: 1px; padding: 1px; width: 5px; } .container-middle { height: 100%; background-color: #000; display: inline-block; margin: 0px; padding: 0px; width: 50px; z-index: 1; overflow: none; display: -ms-flexbox; -ms-flex-pack:center; -ms-flex-align: center; display: -moz-box; -moz-box-pack: center; -moz-box-align: center; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-pack: center; box-align: center; } .container-right { height: 100%; background-color: #000; display: inline-block; float: left; margin: 1px; padding: 1px; width: 5px; } </code></pre> <p>My HTML is...</p> <pre><code>&lt;div style='margin: 0 auto;'&gt; &lt;div class='container-left'&gt;&lt;/div&gt; &lt;div class='container-middle'&gt; &lt;p class='rotate'&gt;This text should be rotated&lt;/p&gt; &lt;/div&gt; &lt;div class='container-right'&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload