Inserire in articolo Joomla due elementi flottanti responsive

[danjde]

Ciao amici,
premetto che non so se l'argomento sia offtopic, eventualmente me ne scuso e chiudete pure il post.

In Joomla 3.x ho creato una pagina collegata ad un articolo che contiene un modulo contatti (Foxcontact) e il richiamo di un plugin per mappa Google (Reumer) il tutto in template responsive:

ecco la pagina:
http://www.byronhotel.it/contatti

Nella pagina ho richiamato entrambi i "plugin" inserendo il sottostante codice:

<div style="float: left; width: 50%;">{loadposition foxcontact}</div>
<div  style="float: left; width: 50%;">{mosmap  width='100%'|height='400px'|  lat='44.0038117'|lon='12.655499999999961'}</div>

E qui cominciano le prime difficoltà. Infatti, la mappa viene visualizzata correttamente e si ridimensiona in base alla larghezza della pagina, ma sotto una certa dimensione, quando ci si aspetterebbe che la mappa scorra verso il basso, dopo il modulo foxcontact, questa invece rimane al suo lato destro creando ovviamente il problema.

In pratica mi servirebbe un consiglio per come fare in modo che la mappa al ridimensionare della finestra scorresse verso il basso al di sotto del form contatti.

..ho acquistato da poco un libro sull'html5 e css e dovrei leggerlo, lo so bene..

PS
avevo aperto un post su questo argomento anche sul forum Joomla, ma è stato chiuso in quanto trattavo di "software commerciale"...

grazie infinite


davide

[Prill]

potresti inserire sui tuoi due div una larghezza minima in pixel (min-width) così che quando la finestra si restringe troppo il secondo div vada a capo. Potresti in alternativa togliere quello stile in linea, assegnare un id a ciascuno dei due e far ricorso alle media queries aggiungendo delle regole apposite nel css. Esempio

#modulo{
 float:left;width:50%
}
#mappa{
 float:left;width:50%
}

@media all and (min-width: 320px) and (max-width: 780px) {
#modulo{
 float:none;width:auto
}
#mappa{
 float:none;width:auto
}

da personalizzare secondo le tue esigenze

[danjde]

Perfetto e ti ringrazio molto!
Per ora ho applicato lo stile in linea e l'indicazione che mi hai dato funziona perfettamente, ma vorrei inserirlo in un foglio di stile.
Il template in uso mi permette di impiegare un "custom.css" in radice senza modificare il css nativo dei singoli componenti, voglio provare a scopo didattico per capire meglio come funziona il foglio di stile ..scusami ma sono proprio alla prime armi

domani provo e aggiorno

grazie ancora