Structure Div avec un design réactif

Question

J'essaie de faire flotter 3 divs dans un ordre différent dans un design responsive. Dans la version mobile est corrélative (div 1, div 2, div 3) mais dans la version de bureau, je veux placer le div 3 près de la div 1 et la div 2 au fond d'entre eux. Je suis en train de le trier avec float, efface et ainsi mais je ne sais pas comment le réparer. Je partage une maquette. peut m'aider quelqu'un? Merci

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

Ceci est la structure html:

<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> 

Dans l'exemple, c'est une tentative:

#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; 
} 

Et autre tentative avec le positionnement absolu et la marge inférieure pour la père conteneur:

#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; 
} 

Answer 1

Ceci est plus ou moins ce que vous voulez: http://jsfiddle.net/uyQzQ/1/

d'abord tout ce que vous voulez faire le premier div à un certain pourcentage de son parent:

#main-container{ 
    width:65%; 
} 

Cela laissera l'espace pour la 3e div tomber plus tard.

alors vous voulez la deuxième div soit la largeur du parent:

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

Enfin, vous voulez positionner le 3ème div dans l'espace gauche à droite de la première div. Pour ce faire, vous devez positionner le parent si le positionnement absolu du 3e div sera par rapport à la mère, pas le document:

#main{ 
    position: relative; 
} 

Maintenant, il vous suffit de définir la largeur de la 3e div à la taille de l'espace qui reste, puis placez-le dans le coin supérieur droit du parent.

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

Je n'ai inclus aucune marge entre chaque élément. Vous pouvez ajuster les largeurs pour en tenir compte pour ajouter ces marges. Le problème principal avec cette approche est que la 3ème div doit être de la même hauteur ou plus courte que div 1, sinon, comme div 3 est hors du flux du document, elle s'affichera également sur div2 (et tout contenu ci-dessous aussi si assez longtemps).