title: Equal margin on both sides of element in responsive layout
body: <p>Hi I am trying to create a responsive layout where I have three different size elements and I want an equal margin on both sides of middle element for all screens.</p>
  
  <p>Here is my HTML and CSS</p>
  
  <pre><code>&lt;section class="container"&gt;
      &lt;div href="/" class="pull-left logo"&gt;&lt;img src="/images/logo.jpg"&gt;&lt;/a&gt;
      &lt;div class="slogan pull-left"&gt;&lt;img src="/images/slogan.jpg"&gt;&lt;/div&gt;
      &lt;div class="pull-left support"&gt;&lt;/div&gt;
  &lt;/section&gt;
  
  &lt;style&gt;
   .pull-left
  {
    float-left;
  }
  .slogan 
  {
    margin: 0 17%;
  }    
  &lt;/style&gt;
  </code></pre>
  
  <p>Since logo and support sections are of fixed size. Above Css works fine for one resolution but as screen size goes down the margin doesn't remain same. </p>
  
  <p>Any ideas how to achieve that?</p>
  
  <p>EDIT: Here is the fiddle. <a href="http://jsfiddle.net/VdYua/22/" rel="noreferrer">http://jsfiddle.net/VdYua/22/</a>
  Initially there is an equal margin on both side of .slogan div. But on re size last div goes to next line. I want the margin to be decreased without braking layout.</p>