Aligning Multiple Divs Side By Side

I am trying to align multiple divs side by side. I have searched stackoverflow and based my code on this: How to align two divs side by side using the float, clear, and overflow e

Solution 1:

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

.left-container {
  float: left;
  width: 750px;
}

.frontpageBoxLeft {
  margin-bottom: 15px;
  width: 750px;
  display: inline-block;
  min-height: 100px;
  float: right;
  position: relative;
  outline: 1px solid red;
}

.frontpageBoxRight {
  width: 540px;
  float: right;
  height: 300px;
  position: relative;
  vertical-align: top;
  outline: 1px solid red;
}

.frontpageBoxContainer {
  width: 1300px;
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="frontpageBoxContainer">
<p class="newsfeedheadline">NEWS FEED</p>
<hr class="hrstarter">
  <div class="left-container">
  <div class="frontpageBoxLeft" id="1">
     et eksempel på en kasse1
</div>
<div class="frontpageBoxLeft" id="2">
     et eksempel på en kasse2
</div>
<div class="frontpageBoxLeft" id="3">
     et eksempel på en kasse3
</div>
  </div>

<div class="frontpageBoxRight">
     et eksempel på en anden kasse
</div>
</div>

Solution 2:

I guess this might help you

div{
  width: 48%;
  height: 100px;
  background-color: red;
  float: left;
  margin: 1%;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

or this one

div{
  width: 23%;
  height: 100px;
  background-color: red;
  float: left;
  margin: 1%;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Solution 3:

Put float: left to the .frontpageBoxLeft selector will solve the problem.

Solution 4:

1. Try set the frontpageBoxContainer to position:relative
2. Float the left AND the right Containers.
3. set left or right Offset to the divs you want to align.