title: CSS responsive box
body: <p>I created a responsive box for my site (<a href="http://www.to-hawaii.com/trees" rel="nofollow">http://www.to-hawaii.com/trees</a>) and it works fine except one thing. See here <a href="http://www.to-hawaii.com/page.jpg" rel="nofollow">http://www.to-hawaii.com/page.jpg</a> on the left and right side of the title there is a gap and I cant figure out how to fix. I figured the problem comes from line style.css 525</p>
  
  <pre><code>.images_tabbox {
      max-width: 495px;
      width: 100%;
      float: left;
      background: transparent url("/theme/images/images_tab_box_mid.jpg") repeat-y scroll center top / 100% 100%;
  }
  </code></pre>
  
  <p>When I remove float:left; this particlar issue is fixed but then the whole box looks like this <a href="http://www.to-hawaii.com/page2.jpg" rel="nofollow">http://www.to-hawaii.com/page2.jpg</a></p>
  
  <p>I would appreciate it if someone has any ideas how to fix this. thanks!</p>