Aligning multiple divs side by side
<p>I am trying to align multiple divs side by side. 
I have searched stackoverflow and based my code on this: <a href="https://stackoverflow.com/questions/18344904/how-to-align-two-divs-side-by-side-using-the-float-clear-and-overflow-elements">How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/</a>.</p>

<p>I've played around with it, and ended up with this css:</p>

<pre><code>    .frontpageBoxLeft, .frontpageBoxRight {
  border-radius: 5px;
  border-color: lightgrey;
  background: #ffffff;
  height: 150px;
}

.frontpageBoxLeft {
  margin-bottom:15px;
  width: 750px;
  min-height: 100px;
  position: relative;
}

.frontpageBoxRight {
  width: 320px;
  float: right;
  height: 300px;
  position: relative;
  vertical-align: top;
}

.frontpageBoxContainer {
    width: 70%;
    height: 500px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
</code></pre>

<p>and this html:</p>

<pre><code>  &lt;div class="frontpageBoxContainer"&gt;
&lt;p class="newsfeedheadline"&gt;NEWS FEED&lt;/p&gt;
&lt;hr class="hrstarter"&gt;
&lt;div class="frontpageBoxLeft" id="1"&gt;
     et eksempel på en kasse1
&lt;/div&gt;
&lt;div class="frontpageBoxLeft" id="2"&gt;
     et eksempel på en kasse2
&lt;/div&gt;
&lt;div class="frontpageBoxLeft" id="3"&gt;
     et eksempel på en kasse3
&lt;/div&gt;
&lt;div class="frontpageBoxRight"&gt;
     et eksempel på en anden kasse
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The result is this:</p>

<p><a href="https://i.stack.imgur.com/UyB29.png" rel="nofollow noreferrer">div alignment</a></p>

<p>I would like to be able to put multiple divs on the left side, and multiple divs on the right side.
Right now the code works fine when iam only using one right and one left div, but with multiple divs it act like in the picture.</p>

<p>Best regards.</p>