html - Get a div to with background to stretch to the bottom of the parent div -

i have 2 divs inside div--one background color, other white.

i keep trying figure out out able both of them stretch bottom of outer div, depending on whichever on longest, without leaving white space on left div or cutting off background or content on 1 of them. end cutting off left div.

in project both divs dynamic , can anywhere empty long. show solid color bottom of page on left side when menu longer content on right. likewise, when content shorter menu, don't want have cut off.

i have created jsfiddle example of problem i'm having: http://jsfiddle.net/nkatz/

it looks right if menu shorter body: http://jsfiddle.net/nkatz/1/

here 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 />     body textbody text<br />     body textbody text<br />     body textbody text<br />     body textbody text<br />     body textbody text<br />     body textbody text<br />     body textbody text<br />     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: vissable; } .leftbox {     float: left;     width: 200px;     background-color: #cf4a41; } .rightbox {     width:720px;      float: right; } .clear {     clear:both; } 

try this:

body {     background: #15384c;     font-family: 'dosis', sans-serif; } .mainbox {     margin-right: auto;     margin-left: auto;     width: 960px;      background: white;     position: relative;     padding: 0px;     overflow: hidden;  } .leftbox {     float: left;     width: 200px;     background-color: #cf4a41;     margin-bottom: -2000px;     padding-bottom: 2000px;  } .rightbox {     width:720px;      float: right; } .clear {     clear:both; }