Problema disposizione elementi pagina web.

[vale92vvz]

Buongiorno a tutti. Sto aiutando una mia amica a sistemare il sito web e ho deciso di renderlo responsive (semplicemente attribuendo la proprieta float ad alcuni elementi).

Normalmente La pagina si presenta cosi:
Screen0.jpg

Una volta che effettuo lo zoom della pagina si presenta cosi:
Screen1.jpg

Il mio problema è che vorrei che il post-it andasse sotto il menu, invece si posiziona dopo la fine del contenuto principale.

Ecco un po di codice. I tre elementi:

<nav id="menu" class="floating-box">
                ....
            </nav>
<section id="section" class="floating-box">
                ....
            </section>
<aside id="aside" class="floating-box">
                .....
            </aside>

e ora il css:

.floating-box {
    float: left;
    margin: 10px;
}

Tralascio il css dei 3 elementi perchè hanno a che fare solo con le loro dimensioni e non il posizionamento. Grazie per il vostro aiuto

[panagulis72]

Ciao,
da quanto vedo il post-it è già sotto il menu quindi hai ottenuto il risultato (in parte). Ora semplicemente potresti aggiungerci un margine superiore o inferiore per farlo salire sotto il menù.

Antonio

[vale92vvz]

Ciao scusa non credo sia un problema di margini. Ti mostro uno screen di una pagina piu grande. Il problema è che il post it si posiziona sotto la coppia menu-contenuto e non solo sotto menu. Esiste un altra possibilita di disposizione che non sia float per raggiungere il mio obbiettivo?

Immagine.jpg

[Mich_]

Quello e` il comportamento del float, in effetti.

Una possibile soluzione e` usare le media query: in pratica se lo spazio e` meno di una certa quantita` la disposizione del tuo post-it e` diversa.

[lucavizzi]

Credo possa essere risolutivo applicare il float:left anche al box rosso ed al box bianco con i contenuti principali, all'interno del #section.
Se, come mi pare di capire, i suddetti box sono all'interno della section#section.

[vale92vvz]

Ragazzi grazie per l' aiuto alla fine ho deciso di usare le media-query per ottenere un risultato accettabile!