2 columns inside a div with two columns

I tried to do a search, but couldn't find anything, but I wasn't sure what to search for with this problem. I'm sorry if there already is a thread on this

My problem is best described with a picture:

As you can see the textboxes are vertically just below the treeview, but they should be on the same line as it. Unfortunatly I haven't found a way to do it. I have tried several tutorials on this, but none of them has helped me

Here's the basic structure for the code I have now:

<div id="home" class="page">
<div id="sidebar">
(...)
</div>
<div id="content">
<div id="CreatePurchase" class="container">
<div class="left">
(...)
</div>
<div class="right">
(...)
</div>
</div>
</div>
</div>

div.left
{
width: 45%;
float: left;
}

div.right
{
width: 45%;
float: right;
}

div.container
{
border: 0px solid #000000;
overflow: hidden;
width: 100%;
}

#sidebar
{
float: left;
margin-left: -10px;
width: 150px;
}

#content
{
margin-left: 170px;
}

Btw, I'm coding in asp.net 2.0, so the divs under the content div is loaded from another file (using content page)