Having trouble getting two divs inside another one to stretch to the bottom without cutting off content?
The goal is for both divs to adjust in height based on whichever one is longer, filling the outer div completely. When the left div (menu) is longer than the right div (content), a solid color should extend to the bottom of the page on the left side. Conversely, when the content is longer, nothing should be cut off.
An example of this issue can be seen in this jsfiddle: http://jsfiddle.net/nKATZ/
If the menu is shorter than the body, it looks correct: http://jsfiddle.net/nKATZ/1/
Here is the code:
html
<div class="mainBox">
<div class="leftBox">
<a href="#">here</a><br />
<a>here</a><br />
<a>here</a><br /><a>here</a><br />
<a>here</a><br />
<a>here</a><br />
<a>here</a><br />
<a>here</a><br />
<a>here</a><br />
<a>here</a><br />
</div>
<div class="rightBox">
body textbody text<br />
body textbody text<br />
body textbody text<br />
body textbody text<br />
...
</div>
<div class="clear" ></div>
</div>
css
body {
background: #15384C;
font-family: 'Dosis', sans-serif;
}
.mainBox {
margin-right: auto;
margin-left: auto;
width: 960px;
background: white;
position: relative;
padding: 0px;
overflow: visible;
}
.leftBox {
float: left;
width: 200px;
background-color: #CF4A41;
}
.rightBox {
width:720px;
float: right;
}
.clear {
clear:both;
}