html5 - Div structure with responsive design -

i´m trying float 3 divs in different order in responsive design. in mobile version correlative (div 1, div 2, div 3) in desktop version want place div 3 near div 1 , div 2 @ bottom of them. i´m triying float, clears , dont know how fix it. share mockup. can me anyone? thanks

mockup http://s2.subirimagenes.com/imagen/previo/thump_8425505positiondiv.png

this html structure:

<div id="fondo-web">  <div id="main">      <section id="main-container" name="div1">         random image     </section>      <section id="cadiz-a-caballo" name="div2">         copy text                </section>      <section id="frm-container" name="div3">         contact form     </section>   </div>  </div> 

in example, 1 attempt:

#main-container{     width:33%;     background-color:#856;     float:left; }  #cadiz-a-caballo{     width:33%;     background-color:#376; }  #frm-container{     width:30%;     background-color:#856;     float: right; } 

and other attempt absolute positioning , margin-bottom father container:

#main-container{     width:62%;     background-color:#856;     float:left; }  #cadiz-a-caballo{     width:70%;     position: absolute;     background-color:#376;     top:600px; }  #frm-container{     width:35%;     background-color:#856;     float: right;  } #main{     width:75%;     margin:auto;     margin-bottom: 150px;     overflow: hidden;     background-color: #343; } 

this more or less want: http://jsfiddle.net/uyqzq/1/

first of want make first div percentage of parent:

#main-container{     width:65%;    } 

this leave space 3rd div fall later.

then want second div full width of parent:

#cadiz-a-caballo{     width: 100%; } 

finally want position 3rd div in space left right of first div. need position parent absolute positioning of 3rd div relative parent, not document:

#main{    position: relative; } 

now, need set width of 3rd div size of space left, , position in top right of parent.

#frm-container{     width:35%;     position: absolute;     top: 0;     right: 0; } 

i've not included margin between each element. can adjust widths take account add margins.

the main issue approach 3rd div needs same height or shorter div 1, otherwise div 3 out of flow of document, display on top of div2 (and content below if long enough).