I need to make a video box area but I can't do this because my div boxes are not side by side.

My outcome looks like this:

.vidcontainer {
  position: relative;
  fload: left;
  weight: 1200;
  height: 300;
  margin: 240 auto;
  background: #ddd;
  border-radius: 15px;
}

.vidcontainer .vidbox {
  position: relative;
  width: 370;
  fload: left;
  height: 370;
  background: #161616;
  fload: center;
  margin: 15px;
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

<div class="vidcontainer">
  <div class="vidbox"></div>
  <div class="vidbox"></div>
  <div class="vidbox"></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Your CSS is missing a lot of "px" and has a few of typos (weight instead of width, fload instead of float). I suggest you use flex instead of floating elements. here is my solution.

.vidcontainer{
  position:relative;
  width:1200px;
  /*height:370px;*/
  margin:240px auto;
  background:#ddd;
  border-radius:15px;
  display: flex;
}

.vidcontainer .vidbox{
  position:relative;
  width:370px;
  height:370px;
  background:#161616;
  margin:15px;
  border-radius:20px;
  box-sizing:border-box;
  overflow:hidden;
}

<div class="vidcontainer">
  <div class="vidbox"></div>      
  <div class="vidbox"></div>
  <div class="vidbox"></div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I can see a mistake in the code.

fload:left; it should be float:left;

just a small spelling mistake.