CSS Divs и поворот текста

Question

Я боролся со следующим макетом и могу приблизиться, но мои divs верны, а мой текст неуместен или наоборот. Вот что я хочу, представьте, что это максимизированный браузер ...

+----------------------------+ 
| |#| |@@@@| |&| | 
| |#| |@@@@| |&| | 
| |#| |@@@@| |&| | 
| |#| |@@@@| |&| | 
| |#| |@@@@| |&| | 
+----------------------------+ 

Вся страница имеет белый фон. Тогда мне просто нужно три divs, которые окрашены в один цвет, черный, например, 100% высоты. Таким образом, в моем хроническом чертеже ASCII первый div - это «столбец», заполненный символами «#», второй div - столбец, заполненный символами «@», а третий div - столбец, заполненный символами «&».

В среднем столбце (символы «@») Я хочу сложить кусок текста над ним, который вращается на 270 градусов. Только одна строка строки длиной 10 символов, вертикально и горизонтально (или даже горизонтально в порядке).

Вот мой CSS - имейте в виду, что здесь есть мусор, так как я прошел через множество представлений перед публикацией. Опять же, я могу получить свои divs достаточно легко, но тогда текст неправильный или если я получу текст правильно, divs неправильно.

.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; 
} 

Мой HTML является ...

<div style='margin: 0 auto;'> 
    <div class='container-left'></div> 
    <div class='container-middle'> 
     <p class='rotate'>This text should be rotated</p> 
    </div> 
    <div class='container-right'></div> 
</div> 

Answer 1

1. Использование поплавок для контейнеров
2. Сделать container-middle и p относительная
3. сделать текст в p нерушимой. Вычислить p положение, используя его ширину и ширину container-middle: p.left = (container.width - p.width)/2
4. Поворот p по происхождению (50%, 50%)

Так закончилась вот так

http://jsfiddle.net/kTDfH/