title: How can I make a div responsive that contains an image
body: <p>I am currently developing a responsive wordpress theme with bootstrap but I am stuck at the following problem that I have three div's next to each other with a featured image that fills the whole div.</p>
  
  <p>The featured image itself is already responsive but for some reason my div is not unless I use width: 33%; for the first and third div and width: 34%; for the second div. But when I do this I get a vertical line on the right of the third div of 1 pixel wide as those percentages together only fill up 1039 pixels together instead of 1040 pixels. Also using a span4 class on each div doesnt work either as it will create a big gap on the right side of the container.</p>
  
  <p>So the wrapper is 1040pixels wide and contains three div's. And each div contains a featured image.</p>
  
  <p>What I want to achieve is that the three images stay next to eachother when scaling and that they only float above each other on the mobile version. But as it is now they instantly jump beneath each other when the page scales.</p>
  
  <p>You can visit the site at <a href="http://makramedia.beta-projects.nl" rel="nofollow">http://makramedia.beta-projects.nl</a> and on the homepage when you scroll down you will see those three images beneath the tab slideshow.</p>
  
  <p>I really hope someone can help me out on this on.
  Many thanks in advance!</p>
  
  <p>Your's sincerely,</p>
  
  <p>Christiaan</p>
  
  <p>Here's my html markup:</p>
  
  <pre><code>&lt;section id="project-section" class="row-fluid content" role="main"&gt;
      &lt;?php global $query_string; // required ?&gt;
      &lt;?php query_posts('category_name=projecten&amp;showposts=3&amp;order=DESC'); ?&gt;
      &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;
      &lt;div class="project"&gt;
          &lt;a href="&lt;?php echo get_permalink(); ?&gt;"&gt;
              &lt;img class="project-icon" src="&lt;?php bloginfo('template_directory') ?&gt;/img/project-icon.png"&gt;
              &lt;?php if ( has_post_thumbnail() ) {          
                  the_post_thumbnail('projecten3-thumb', array( 'class' =&gt; "project-img"));
              } ?&gt;
          &lt;/a&gt;
      &lt;/div&gt;
          &lt;?php endwhile; else: ?&gt;
              &lt;p&gt;There are currently no news items availlable.&lt;/p&gt;
          &lt;?php endif; ?&gt;
          &lt;?php wp_reset_query(); ?&gt;
      &lt;div class="clearfloat"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And here's my CSS:</p>
  
  <pre><code>#project-section {
      position: relative;
      display: block;
      height: auto;
      max-width: 1040px;
      margin: 0;
      padding: 0;
      background: #111421;
      overflow: hidden !important;
  }
  
  .project {
      display: inline-block;
      position: relative;
      float: left;
      width: 100%;
      max-width: 347px;
      max-height: 213px;
      margin: 0;
      padding: 0;
      background: #afafaf;
      overflow: hidden;
  }
  
      .project:nth-child(2) {
          max-width: 346px !important;
      }
  
  .project-img {
      max-width: 100% !important;
      height: auto;
  }
  
  .project-icon {
      display: block;
      position: absolute;
      left: -35px;
      margin-top: 80px;
      margin-left: 50%;
      opacity: .8;
      /*transform*/
      -webkit-transform:scale(.9);
      -moz-transform:scale(.9);
      -ms-transform:scale(.9);
      -o-transform:scale(.9);
      transform:scale(.9);
      /*transition*/
      -webkit-transition: all .2s;
      -moz-transition: all .2s;
      -o-transition: all .2s;
      transition: all .2s;
  }
  
      #project-section .project:hover .project-icon {
              opacity: 1;
              /*transform*/
              -webkit-transform:scale(1);
              -moz-transform:scale(1);
              -ms-transform:scale(1);
              -o-transform:scale(1);
              transform:scale(1);
              /*transition*/
              -webkit-transition: all .5s;
              -moz-transition: all .5s;
              -o-transition: all .5s;
              transition: all .5s;
      }
  </code></pre>