HTML5框架的文字在侧面-不是字段集/图例

Question

I'm building a bootstrap base site, where I'm trying to create a frame with text attached along is't left side (see attached sketch-up image done in MS paint). So far to no avail.

I attempted to use fieldset and legend, and have been able to create a title on top of the fieldset in the legend, but I cannot rotate the legend to sit on the side as I want to. Furthermore, the fieldset/legend solution does not work properly in IE, as the legend keeps flying around uncontrollably.

Therefore, I will like to know if you have any ideas on how this could be achieved.

I thought about just setting them frames and the text as part of my background, but as I scale my browser window up and down, everything will look very messy.

Looking forward to hear your ideas. Thank you in advance and have a great day.

Like to sketch-up example of what I would like my frame to looklike

Answer 1

Try this Demo Here

<div class="outerDiv">
        <div class="innerDiv">Example text here</div>
    </div>

• CSS

.outerDiv{ height: 300px; width: 140px; border-radius: 10px; border:2px solid green; margin: 0 auto; position: relative }

.innerDiv{
    color: green;
    font-size: 15px;
    left: -65px;
    position: absolute;
    top: 54px;  
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg);  
    -o-transform: rotate(-90deg);   
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}