make left div take the rest of the width - html

Question

I want my left div to take the width that is left, the right div has a set width that doesn't change as shown below:
HTML:
<link rel="stylesheet" type="text/css" href="css/topic.css">
<div id="topic">
<div class="post_right"></div>
<div class="post_left">
<div class="post_header">
<ul style="padding: 0px; margin: 0px; display: inline-block;">
<li>
<img src="images/eduardo_img.jpg" height="30px">
<span style="vertical-align: bottom;">Administrator</span>
</li>
<li>
Group name here
</li>
</ul>
<span style="float: right;">
<img src="images/thumb_up.png" height="30" /> 12
<img src="images/thumb_down.png" height="30" /> 2
</span>
</div>
<div class="post_body"></div>
<div class="user_signature"></div>
</div>
</div>
CSS:
#topic{
width: 100%;
overflow: hidden;
border: 1px solid;
min-height: 200px;
}
.post_left{
border: 1px solid;
overflow: hidden;
display: inline-block;
min-height: 20px;
margin: 10px;
}
.post_header{
height: 30px;
padding: 5px;
border: 1px solid;
}
.post_right{
border: 1px solid;
width: 300px;
float: right;
display: inline-block;
height: 20px;
margin: 10px;
}
.post_body{
height: 200px;
border: 1px solid;
margin: 10px;
}
.post_header li{
vertical-align: bottom;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid;
}
.post_header li:last-child{
border: 0px;
}
the div in the left takes a set width and there is a huge gap of empty space in the middle, how would i fix this? thank you!

Answer 1

Fixed it! all i had to do is remove the Display: inline-block; from the .post_left div