CSS - 垂直文本与另一个 div 内容重叠

Question

下面的 div 包含垂直文本(是页面左侧的页面标题)。问题在于垂直文本溢出其 div 并与另一个内容 div 重叠。我做了这样的事情:

<style type="text/css">
.vertical_text{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    display:block;
    white-space:nowrap;
    direction:rtl;
    margin:0;
    color:#000;
    padding:0 10px 0 0;
}
</style>

<!--left sidebar-->
<div class="vertical_text" style="width:30%;">
    Vertical text that overlap bottom div content
</div>
<!--right sidebar-->
<div style="width:70%;">
    Main page content
</div>

<!--Footer-->
<div style="width:100%;">
    Footer div. Content in this div is covered by vertical text
</div>

如何防止与其他 div 内容重叠？我需要将页脚 div 向下移动以防止其内容重叠。

感谢帮助， 维克多

Answer 1

评论后编辑

我添加了一些 Jquery 脚本来管理动态高度。并将旋转 div 移动到另一个中以保持拆分 30%/70%

JsFiddle

CSS

.vertical_text{
    direction:rtl;
    margin:0;
    color:#000;
    white-space:nowrap;
}
.rotate{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

HTML

<!--left sidebar-->
<div style="float:left;width:30%">
    <div class="vertical_text" >
        Vertical text that overlap bottom div content
    </div>
</div>
<!--right sidebar-->
<div style="width:70%;float:left">
    Main page content
</div>
<div style="clear:both">
</div>    
<!--Footer-->
<div style="width:100%;margin-top:10px;">
    Footer div. Content in this div is covered by vertical text
</div>

JavaScript

$(function() {
   $(".vertical_text").height($(".vertical_text").width());
    $(".vertical_text").addClass("rotate");
});