title: CSS navigation bar - centering based on element within nav bar
body: <p>I'm trying to create a nav bar with four elements, two smaller buttons that will link to the homepage and a contact page, and then two larger buttons that will link to the two main sections of the site. I'm trying to position things in such a way that the two large buttons are centered, with the two smaller buttons to the left of them.</p>
  
  <p>I can't "margin: 0 auto;" the two large buttons inside their own div as I would have to set it to "display: block;" which sets them on a different line than the smaller buttons, and absolutely positioning things messes up the layout as soon as the browser window changes.</p>
  
  <p>I feel like I'm missing something simple here. Am I going at this from the wrong angle?</p>
  
  <p>Here's a Dabblet of what I have at the moment... <a href="http://dabblet.com/gist/6287837" rel="nofollow">http://dabblet.com/gist/6287837</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="nav-container"&gt;
  &lt;div id="small-button-container"&gt;
      &lt;img src="http://placehold.it/47x22" class="small-button01" /&gt;
      &lt;img src="http://placehold.it/70x42" class="small-button02" /&gt;
  &lt;/div&gt;
  &lt;div id="big-button-container"&gt;
      &lt;img src="http://placehold.it/360x64" /&gt;
      &lt;img src="http://placehold.it/360x64" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#nav-container{
  outline: 1px red dashed;
  width: 1000px;
  display: block;
  margin: 0 auto;}
  
  #small-button-container{
  display: inline-block;
  width: 136px;
  position: relative;
  top: -22px;
  left: 40px;}
  
  #big-button-container{
  display: inline-block;
  width: 780px;
  height: 64px;
  margin-left: 70px;}
  
  .small-button01{
  display: inline;
  position: relative;
  left: 5px;}
  
  .small-button02{
  display: inline;
  position: relative;
  left: 15px;}
  </code></pre>