CSS - Vertical text overlap another div content

Question

the following div contains vetical text (is the page title at left of the page). The problem is that the vertical text overflow its div and overlap another content div. I've made something like this:

<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>

How can I prevent overlap others divs content? I need that the footer div move down to prevent its content overlap.

Thanks for help, Victor

Answer 1

EDIT AFTER COMMENT

I added some Jquery script to manage the dynamic height. And move the rotate div in another one to maintain split 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");
});