Quello che spesso confonde nella realizzazione di pagine html, per quanto riguarda il layout, è che il contenuto viene visualizzato come una successione di oggetti (testo, immagini, etc.) che partendo dall'alto a sinistra scorre verso destra per tutto lo spazio disponibile e poi va a capo, esattamente come accade quando scriviamo.

Il primo e più semplice modo per modificare questo comportamento è quello di inserire un "a capo". Ad esempio </br> interrompe il flusso e va direttamente a capo.

Ma questo è ovviamente noto a tutti (altrimenti conviene leggere questa lezione)

Spesso tale comportamento non è quello desiderato, perché quando progettiamo il layout della nostra pagina ragioniamo in modo diverso, molto più simile ad una griglia: questo lo voglio in alto, quest'altro in una colonna a destra, in basso voglio che ci sia un div con il footer, etc. etc.

Per far si che il contenuto della nostra pagina segua il nostro layout, non è possibile procedere per tentativi (pena la perdita di pazienza e spesso di una montagna di tempo) perché esistono dei modi precisi per farlo e non sono per niente intuitivi.

Quindi consiglio caldamente di invesite un po' di tempo nello studio, sia leggendo la guida di cui sopra, sia leggendo questo tutorial che personalmente trovo utilissimo per capire tali concetti.