Problem mit Größe und Positionierung Footer

[Hefty_Schlumpf]

Hallo,

ich versuche mich gerade einer Homepage und habe ein Problem.

Und zwar habe ich einen Header, darunter eine Menüzeile, dann kommt ein zweigeteilter Abschnitt und ein Footer.

Ich habe es über box-sizing: border-box hinbekommen, dass in dem zweigeteilten Bereich mit dem aktuellen Beispieltext beide Bereiche gleich groß sind. (Siehe Bild 1)

Wenn ich aber nun im rechten Teil mehr Text drin habe, passt sich dieser Bereich an, aber der Linke nicht. Wie kann ich diese beiden Bereiche quasi aneinander koppeln, so dass sie immer die gleiche Höhe haben? (Bild 2)

Auszug aus der Html-Datei:

<main role="main">
<nav id="menu">
  <ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="1-unterseite.html">Mitglieder</a></li>
    <li><a href="1-unterseite.html">Infos</a></li>
    <li><a href="1-unterseite.html">Missionen</a></li>
    <li><a href="1-unterseite.html">Jedi-Archiv</a></li>
    <li><a href="1-unterseite.html">Jeditorials</a></li>
  </ul>
</nav>
<article>
  <h1>Herzlich Willkommen</h1>
  <p>
    Wir freuen uns, Sie auf unserer Homepage begrüßen zu können. Informieren Sie sich auf unserer Internetpräsenz über unser Unternehmen und unsere Leistungen. Unser Geschäft stellt Ihnen eine große Bandbreite zur Verfügung, aus der Sie ganz nach Ihrem Geschmack wählen können. Dabei unterstützen wir Sie mit einer umfassenden und fachlich kompetenten Beratung.<br>
    Sie möchten mehr über uns und unser Angebot erfahren? Gerne stellen wir uns Ihnen vor. Unser Team ist jederzeit gerne für Sie da ist. Wir freuen uns auf Sie!jfkdhgfkdfhgkf</p>
  </p>
  <p>
    <!-- viel Text entfernt -->
  </p>
</article>

<aside>
  <nav id="navigation">
    <ul>
      <li><a href="index.html">Forum</a></li>
      <li><a href="1-unterseite.html">Chat</a></li>
      <li><a href="1-unterseite.html#">Gästebuch</a></li>
      <li><a href="1-unterseite.html">Kontaktformular</a></li>
    </ul>
  </nav>  
</aside>
	
</main>

<footer>
<nav id="foot">
  <ul>
    <li><a href="1-unterseite.html">Sitemap</a></li>
    <li><a href="2-kontakt.html">Kontakt</a></li>
    <li><a href="2-kontakt.html">Impressum</a></li>
  </ul>
</nav>
</footer>

Auszug aus CSS:

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

article {
  background: #f7e7b6;
  border: 1px #E5E7EB solid; 
  margin-top: 50px;
  padding: 30px;
  width: 77%;
  min-height: 100vh;
  float:right;
}

aside {
  float: left;
  width: 23%;
}
aside ul {
  line-height: 1.6em;
  list-style: none outside none;
  padding: 1em 0 1em 5px;
  clear: left;
}

nav#navigation{
  float: left;
  margin-right: 30px;
  margin-top: 50px;
  width: 225px;
  min-height: 100vh;
  background-color: #eec277;
}

nav#foot { 
  width: 990px;  
  list-style-type: none;
  position: relative;
  left: -20px;
  display: block;
}

Desweiteren habe ich noch das Problem, dass ich den footer nicht richtig positioniert bekomme. Er sollte direkt an das Ende des oberen Bereichs anschließen, ohne Lücke. Wenn ich hier bei position: absolute nehme, hab ich den footer, oben auf der Menüleiste über dem zweigeteilten Bereich hängen.

Ich hoffe, mir kann jemand helfen? Danke schon mal!! []