Rows getting stretched by adjacent content

Rows getting stretched by adjacent content

I am maintaining a web page that uses bootstrap 2.3.2, and I have come
across the following issue. The page is split into a sidebar and a main
container, inside the main container there are fluid rows. These rows get
shifted downwards by the content in the sidebar. Can anyone explain why
this is happening, and/or propose a workaround? Some code is below, fiddle
here.
HTML:
<div class="container-fluid">
<div class="left-div">
<p>Some content here</p>
<ul class="nav nav-list">
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
</ul>
</div>
<div class="right-div">
<div class="row-fluid">
<div class="span6">
<h3>Stuff here</h3>
</div>
<div class="span6">
This row gets stretched vertically
</div>
</div>
<div class="row-fluid">
<p>This content gets pushed down</p>
</div>
</div>
</div>
CSS:
.left-div {
width: 200px;
background-color: #DDDDDD;
float: left;
}
.right-div {
margin-left: 220px;
border-color: #DDDDDD;
border-width: 2px;
border-radius: 3px;
border-style: solid;
padding: 25px;
}