javascript - すべての div をうまく整列させる方法

Question

私は自分のコードをいじっています。Calendar を設定して、やりたいことを実行しました。今は<p>、iframe と iframe をうまく並べようとしています。これまでのところ、このコードはjsfiddleです。矢印と iframe の分離が現在どのように見えるかの例

私が達成したいこと:

200px----[矢印左]---30px---[iframe]---30px---[矢印右]

HTML:

<div id="miniFeed">


<p id="toggle">
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('LeftArrow','','WEBgraphics/arrowLeftROLL.png',1)">
<img src="WEBgraphics/arrowLeft.png" width="40" height="400" id="LeftArrow"></a></span>
<span> </span>
</p>



<div id="calender">


<div id="left"> <iframe src="calenderAPRIL.html" width="350px" height="400px"></iframe>   
</div>

<div id="right"> <iframe src="calenderMAY.html" width="350px" height="400px"></iframe>   
</div>


</div>

<p id="toggle">

<span> </span>

<span> <a href="#" onMouseOut="MM_swapImgRestore()"  
onMouseOver="MM_swapImage('RightArrow','','WEBgraphics/arrowrightROLL.png',1)">
<img src="WEBgraphics/arrowright.png" width="40" height="400" id="RightArrow"></a></span>   
</p>



</div>

ジャバスクリプト:

window.onload=function() {
$('#toggle > span').click(function() {
var ix = $(this).index();

$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
};

CSS:

#miniFeed {
}
#right { display:none; }
#LeftArrow {
z-index: 100;
width: auto;
float: left;
margin-left: 200px;
display: block;
}
#calender {
float: left;
z-index: -1;
}