section in einen linken und rechten Abschnitt unterteilen

[Bastian1]

Hallo,
ich stehe vor einem Problem:

Ich gestalte gerade einen onpager, der in sections aufgeteilt ist. Eine dieser sections möchte ich in zwei gleichgroße Bereiche teilen, damit auf einer Seite Text steht und auf der anderen Seite ein Bild sein kann.

Ich der html steht folgendes:

<section id="name">

<h1> Überschrift </h1>

<div id="links">

</div>


<div id="rechts">

</div>

</section>

In der css habe das geschrieben:

#links {float:left;
width:50%;}

#rechts {float:right;
width:50%;}

Das Problem ist jetzt folgendes: Die einzelnen div-container haben je nachdem womit ich sie fülle eine unterschiedliche Länge. Dadurch hängt entweder der linke oder der rechte container unten rüber. Es ist nicht so, dass die section geschlossen endet. Mir kommt es auch so vor als wenn die section beim Beginn des ersten containers enden würde, da der Hintergrund nach der Überschrift endet, direkt dort wo die container beginnen.

Wie kann man das Problem lösen?

 

[Oliver77]

Mach das mit Flex, Float ist veraltet.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Nutze Stretch:

.container {
  align-items: stretch;
}

Ein kleines Beispiel:
https://codepen.io/Oliver7777/pen/GRbgpXx