title: Div tags with float left not printing properly
body: <p>I have a layout that has a container div tag and some nested floating div tags. I'm using them in this manner to have two column effect (rather than do table cells). On the web page, everything renders fine. But when I print, the floating ones aren't showing up correctly. It's a sequence of 2 sets of container div/floating divs and then a full width div tag (no floating). Here's the code:</p>
  
  <pre><code>&lt;div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;"&gt;
    &lt;div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;"&gt;
      &lt;span style="font-weight: bold;"&gt;Provider: &lt;/span&gt;
      Name here
    &lt;/div&gt;
    &lt;div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;"&gt;
      &lt;span style="font-weight: bold;"&gt;Location: &lt;/span&gt;
      Name&lt;br/&gt;
      Street Address&lt;br/&gt;
      City, State Zip&lt;br/&gt;
      Phone
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;"&gt;
    &lt;div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;"&gt;
      &lt;span style="font-weight: bold;"&gt;Appointments:&lt;/span&gt;
      &lt;br /&gt;
      No appointments scheduled
    &lt;/div&gt;
    &lt;div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;"&gt;
      &lt;span style="font-weight: bold;"&gt;Care Team:&lt;/span&gt;
      &lt;br /&gt;
      Name Here
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="margin-bottom: 5px; padding: 5px; border-top: 1px solid #000000;"&gt;
    &lt;span style="font-weight: bold;"&gt;Referrals:&lt;/span&gt;
    &lt;br /&gt;
    No referrals available
  &lt;/div&gt;
  </code></pre>
  
  <p>As stated, everything renders correctly on the web page. Thanks to @avrahamcool I have it fixed so that the top border lines are showing up correctly. However, when I use IE9, I am getting what looks like the following:</p>
  
  <hr>
  
  <p><b>Provider:</b>  Name here<br>
  <b>Location:</b> Name<br>
  Street Address<br>
  City, State Zip<br/>
  Phone<br/></p>
  
  <hr>
  
  <p><strong>Appointments:</strong><br>
  No appointments scheduled<br>
  <strong>Care Team:</strong><br>
  Name Here</p>
  
  <hr>
  
  <p><strong>Referrals:</strong><br>
  No referrals available</p>
  
  <p>It's working fine in Chrome. The provider/location and appointments/care team are split into two columns between the border lines when it's printed (and shows up fine on the screen)</p>