javascript - making divs with auto margins in parent div with variable height -

i have code

<div style="position: relative;">     /***main***/      <div style="top:0">         /*****content1****/     </div>      <div>         /*****content2****/     </div>      <div>         /*****content2****/     </div>      <div style="bottom:0">         /*****content4****/     </div>  </div> 

i want content1 @ top , content4 @ bottom, want content2 , content3 adjust top , bottom margin equally even, unable this, parent div of variable height , other divs of fixed height.

i think understand want http://www.spoiledagent.com/ads/help.jpg

please help,

you can try this:

http://jsfiddle.net/q4xaq/

<div id="main">     <div id="content1">/*****content1****/</div>     <div id="content2">/*****content2****/</div>     <div id="content3">/*****content3****/</div>     <div id="bottom">/*****content4****/</div> </div>  #main{     margin: 0 auto;     width: 960px;     background: red; }  #content1{     height: 80px;     background: gray; }  #content2{     width:480px;     height: 300px;     float: left;     background: yellow; }  #content3{     width:480px;     height: 300px;     float: right;     background: brown; }  #bottom{     height: 50px;     clear:both;     background: blue;; }