title: How to make all my divs line up together nicely
body: <p>I've been playing around with my code, I have the Calendar set up to do what i want, now I am just trying to get the <code>&lt;p&gt;</code> and iframe lined up beside each other nicely, i have this code so far <a href="http://jsfiddle.net/U2HK9/" rel="nofollow">jsfiddle</a> and here is an example of what the separation f the arrows and iframe looks like <a href="http://hardknocks365.com" rel="nofollow">now</a></p>
  
  <p>what i want to achieve:</p>
  
  <blockquote>
    <p>200px----[  arrowLEFT ]---30px---[  Iframe  ]---30px---[  arrowRIGHT 
    ]</p>
  </blockquote>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="miniFeed"&gt;
  
  
  &lt;p id="toggle"&gt;
  &lt;span&gt; &lt;a href="#" onMouseOut="MM_swapImgRestore()"
  onMouseOver="MM_swapImage('LeftArrow','','WEBgraphics/arrowLeftROLL.png',1)"&gt;
  &lt;img src="WEBgraphics/arrowLeft.png" width="40" height="400" id="LeftArrow"&gt;&lt;/a&gt;&lt;/span&gt;
  &lt;span&gt; &lt;/span&gt;
  &lt;/p&gt;
  
  
  
  &lt;div id="calender"&gt;
  
  
  &lt;div id="left"&gt; &lt;iframe src="calenderAPRIL.html" width="350px" height="400px"&gt;&lt;/iframe&gt;   
  &lt;/div&gt;
  
  &lt;div id="right"&gt; &lt;iframe src="calenderMAY.html" width="350px" height="400px"&gt;&lt;/iframe&gt;   
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;p id="toggle"&gt;
  
  &lt;span&gt; &lt;/span&gt;
  
  &lt;span&gt; &lt;a href="#" onMouseOut="MM_swapImgRestore()"  
  onMouseOver="MM_swapImage('RightArrow','','WEBgraphics/arrowrightROLL.png',1)"&gt;
  &lt;img src="WEBgraphics/arrowright.png" width="40" height="400" id="RightArrow"&gt;&lt;/a&gt;&lt;/span&gt;   
  &lt;/p&gt;
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>window.onload=function() {
  $('#toggle &gt; span').click(function() {
  var ix = $(this).index();
  
  $('#left').toggle( ix === 0 );
  $('#right').toggle( ix === 1 );
  });
  };
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#miniFeed {
  }
  #right { display:none; }
  #LeftArrow {
  z-index: 100;
  width: auto;
  float: left;
  margin-left: 200px;
  display: block;
  }
  #calender {
  float: left;
  z-index: -1;
  }
  </code></pre>