html table not fitting container with auto width and nowrap parent

HTML

<div id="left">
  <div class="listPropertyDiv">
    <div class="listAddressDiv">
      <a href="">4205 Ohio St 202, San Diego, CA 92104</a>
    </div>
    <div class="listPhotoAndInfoDiv">
      <img src="http://tempo5.sandicor.com/SNDImages/228/120053476_101_81.jpg" class="listImage">
      <table class="listInfoTbl">
        <tbody>
          <tr>
            <td class="listInfoLbl">Listing Price</td>
            <td class="listInfoVal listInfoPrice">$175k</td>
          </tr>
          <tr>
            <td class="listInfoLbl">Status</td>
            <td class="contingentColor listInfoStatus listInfoVal">Contingent</td>
          </tr>
          <tr>
            <td class="listInfoLbl">Days Active</td>
            <td class="listInfoVal">0</td>
          </tr>
          <tr>
            <td class="listInfoLbl">Beds</td>
            <td class="listInfoVal">2</td>
          </tr>
          <tr>
            <td class="listInfoLbl">Baths</td>
            <td class="listInfoVal">2</td>
          </tr>
          <tr>
            <td class="listInfoLbl">Sqft</td>
            <td class="listInfoVal">840</td>
          </tr>
          <tr>
            <td class="listInfoLbl">Lot Size</td>
            <td class="listInfoVal">0 (Common Interest)</td>
          </tr>
          <tr>
            <td class="listInfoLbl">Type</td>
            <td class="listInfoVal">All Other Attached</td>
          </tr>
          <tr>
            <td class="listInfoLbl">Year Built</td>
            <td class="listInfoVal">1990</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS

* {
    background-color: black;
}

#left {
    overflow-x: visible;
    max-width: 400px;
    width: 100%;
    margin-top: 5px;
    /*right margin is determined by the right positioning of the map since its absolute*/
    margin-bottom: 5px;
    margin-left: 4px;
    /*position: absolute;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;*/
}

.listPropertyDiv {
    display: block;
    border: 1px solid red;
    margin-bottom: 5px;
    margin-right: 1px;
    
    width: auto; /*380px; needs to be fluid in case there is no vertical scrollbar*/
    /*float: left;
    clear: both;*/
    /*position: relative;*/
}

.listPropertyDiv, .listAddressDiv, .listPhotoAndInfoDiv, .listImage, .noImage, .listInfoTbl, .listInfoVal, .listAddressDiv a {
    background-color: White;
}

.listAddressDiv {
    display: block;
    font-family: Arial;
    font-size: 12px;
    padding: 3px 2px 2px 3px;
}

.listPhotoAndInfoDiv {
    min-width: 100%;
    display: inline-block;
    white-space: nowrap;
}

.listPhotoDiv {
    /*display: block;
    float: left;
    clear: left;*/
    /*position: absolute;
    /*left: 0px;
    bottom: 2px;
    display: none;*/
}

.listImage, .noImage {
    display: inline-block;
    white-space: normal;
    vertical-align: top;

    cursor: pointer;
/*    width: 248px; /*height-width ratio maintains 800x600 ratio*/
/*    height: 186px; /*height-width ratio maintains 800x600 ratio*/
    width: 60%;
    max-width: 248px;

    /* add a loading image */
    background-color: White;
    background-image: url('../img/loading3.gif');
    background-repeat: no-repeat;
    background-position: center center;
    
    line-height: 0px; /* to eliminate extra 1px line of horizontal space Opera adds below div*/ /*TODO maybe recheck this to see if it's still needed without a wrapping div*/
    /*margin-right: 2px;*/
}

.listInfoTbl {
    height: 186px; /*matches height of photo*/
    border-collapse: separate;
    border-spacing: 2px;
    border: 0px;
    
    display:...