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%
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");
});