title: Fixed DIV with shifting responsive DIVs
body: <p>Have one I can't quite figure out... I'm trying to see if this is possible to do without having to use jquery or javascript. If there's no other option, then I'll resort to that solution. </p>
  
  <p>I have an image gallery made up of inline-block DIVs, all fixed size of 197px width. All these image divs are contained in a container overall and allow the max amount of images to display in a row based on the browser width.  I want to add about the middle of this gallery a 100% width DIV that can contain a Google Ad. I would like to have this DIV so that a perfect number of image DIVs are above it completely filling the row. Because I don't know what screen size the user will have and how many images across will fit in a row, I can't count on there being 5 across, or 2 across, etc. So how can I have a 100% width DIV half way down the container DIV that can, responsively, always make sure that there's a full row of image DIVs above it? The gallery itself has a variable number of images... some as low as 10, some as many as 200+. </p>
  
  <p>So basically, I want it to look like this:</p>
  
  <pre><code>[IMAGE1] [IMAGE2] [IMAGE3] [IMAGE4] [IMAGE5]    
  [ GOOGLE AD DIV ---------------------------]
  </code></pre>
  
  <p>And if the browser is resized so it's only able to display 4 across, I <strong>don't</strong> want this:</p>
  
  <pre><code>[IMAGE1] [IMAGE2] [IMAGE3] [IMAGE4]
  [IMAGE5]    
  [ GOOGLE AD DIV ------------------]
  </code></pre>
  
  <p>I'd like it instead to do this on the fly no matter how the browser is resized:</p>
  
  <pre><code>[IMAGE1] [IMAGE2] [IMAGE3] [IMAGE4]
  [ GOOGLE AD DIV ------------------]
  [IMAGE5]    
  </code></pre>
  
  <p>I thought about using a float, set to 50% down, but that pushes all the DIVs under it. I would imagine position:absolute wouldn't work as it'd just put the DIVs behind it. Anyone have any ideas on this? Thanks!</p>