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;
}

<divclass="frontpageBoxContainer"><pclass="newsfeedheadline">NEWS FEED</p><hrclass="hrstarter"><divclass="left-container"><divclass="frontpageBoxLeft"id="1">
     et eksempel på en kasse1
</div><divclass="frontpageBoxLeft"id="2">
     et eksempel på en kasse2
</div><divclass="frontpageBoxLeft"id="3">
     et eksempel på en kasse3
</div></div><divclass="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.