[Jaxel]

So I'm trying to figure out a few of the quirks in CSS code... Lets say I have the following code:

<div class="block" id="recentvideo">
  <h2 class="blockhead">Recently Uploaded Media</h2>
  <div class="blockbody floatcontainer" style="background: #F2F6F8 none;">
    <ul id="latestmediacontainer" style="padding: 20px 0px 0px 0px;">
      <li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px;
        background: white none; border: 1px solid #E9E9E9;
        display: block; float: left; padding: 10px;
        text-align: center; margin: 0px 0px 20px 20px;
        height: 200px; width: 300px;">testing....</li>
      <li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px;
        background: white none; border: 1px solid #E9E9E9;
        display: block; float: left; padding: 10px;
        text-align: center; margin: 0px 0px 20px 20px;
        height: 200px; width: 300px;">testing....</li>
    </ul>
  </div>
</div>

Gives the following output:


However, I would like these two <LI> fields to stretch to 50% each, so it fills out the entire division. So I changed the width of the two <LI> fields to 50%, instead of 300px. Unfortunately this didn't work and instead gave me thus:


It looks like it is doing this because 50% isn't 50% of the remaining space, but 50% of the entire space of the division, BEFORE space is removed for padding, margins, dropshadows and borders. This is evident because if I change the width of the <LI> fields to 100%, I get the following:


So my question of course is... How do I put a percentage width in place that calculates based on the remaining space available?