Salve a tutti, avrei un problema. Sto studiando CSS ma non riesco a capire come creare un layout basilare, con header, sezione main, una sidebar e un footer.
Per creare i contenitori in html ho utilizzato dei semplici <div> con id univoco.ho creato ciascun div e li ho chiusi in un div genitore container:
codice:
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <title></title>
	<link rel="stylesheet" href="css/basic.css">
</head>
<body>

<div id="container">

<div id="banner">
</div>


<div id="main">



</div>
<!-- fine main>

<div id="sidebar">
</div>


<div id="footer">
</div>

</div>
<!-- fine container>


</body>
</html>

Per i CSS ho solamente colorato i div diversi, per capire che comportamento possano avere in base alle impostazioni che cambio.

codice:
@charset "utf-8";

body {
      line-height: 16px;
      font-family: ubuntu, verdana;
      color: white;
	  background: black;
	  }
img {
    border: 1px dotted red;
	}
#main {
   background: red;
   color: black;
   }
   
#banner
         {
       background: yellow;
     }
#sidebar
          {
       background: green;
      }
#footer
           {background: white;
	   
      }

Come faccio dunque ad ottenere che la sidebar vada ad allinearsi a destra, il footer rimanga in basso, e lasci lo spazio alla div principale, man mano che questa viene aggiornata?

Grazie a chi vorrà aiutarmi