I have my body div within the body of my page set to body_content. I have my min-height set to 100%. Within this div, I have the main_content div which acts as a wrapper for the content. Also set to min-height of 100%. However, regardless of how I change my css, a scroll bar is added both horizontally and vertically to my body_content div. I have removed the x using hidden but I need to get rid of the y scroll bar and have the content expand correctly instead.
Mind you, right_body_menu is place to the right of main_content.
Additionally, disregard middle_body_content as I am only adding into it to test the div expansion.
#body_content{
position:relative;
margin: 0 auto;
min_height = 100%;
width = 85%;
background_color = white;
border_left = 1px solid #cacaca;
border_right = 1px solid #cacaca;
overflow-x:hidden;
padding-bottom:50px;
}
#main_content{
width: -moz-calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: -o-calc(100% - 300px);
width: calc(100% - 300px);
height:100%;
float:left;
}
#right_body_menu{
min-height:100%;
background-color:white;
width:300px;
position:absolute;
right:0;
}
$main_content = "
<div id='main_content'>
<div id='body_top_wrapper'>
</div>
<hr>
" . $middle_body_content . "
</div>
$body_content = "
<div id='body_content'>
" . $main_content . "
</div>
$body_content is our var that is being echoed into the body section of the page. Any ideas?
I've seen boxes expand after eliminating height limitations. Max-width is useful, but what if you get rid of min-height?