html - Two floating divs, one text is vertical -

have been fiddling hour, starting lose it. want

i tried using css webkit-transform-rotate, vertical text out of place (also tried set width & height seems weird)

any more appreciated!

i think trick you. check code snippet. can use css transform this. rotate text -90 degrees , problem solved. add writing-mode tb-rl.

.test    {      width: 300px;      height: 300px;      margin-top:50px;         }        .vertical    {       writing-mode:tb-rl;      -webkit-transform:rotate(-90deg);      -moz-transform:rotate(-90deg);      -o-transform: rotate(-90deg);      -ms-transform:rotate(-90deg);      transform: rotate(-90deg);      transform-origin:100 100;      white-space:nowrap;      display:block;      float: left;      background: #ccc;      width: 94px;      padding:5px;      font-size:13px;      font-weight:bold;      margin-top:38px          }      .normal    {      width: 190px;      float: left;      background:#555;      height:100px;      margin-left:-40px;      padding:1px;    }

<div class="test">  	<div class="vertical">  		hello there  	</div>  	<div class="normal">  		some other content        other content        other content        other contentsome other content  	</div>  </div>