<style>

 .divSquare {

  width: 30%;

  height: auto;

  margin: 3px;

  border: 2px solid black;

  float: left;

  padding: 3px;

  border-radius: 0.75em;

  background: #faedef;

   display:inline;

}

#textobody mark {

  font-family: lovely;

  font-size: 1.5em;

  border: 1px dashed black;

  background-color: #f7c0d6;

  text-shadow: -1px 0 #fff, 0 1px #000, 1px 0 #000, 0 -1px #fff, 0 0;

  color: #b84154;

  border-radius: 100%;

  padding: 0 1px 0 1px;

}

#yay {

  overflow: scroll;

  width: auto;

  height: 70px;

  overflow-x: hidden;

  text-align: left;

  font-family: "Bai Jamjuree", sans-serif;

  font-size: 1em;

  line-height: 0.875;

  font-weight: 500;

  color: #000;

}

#yay a {

  color: inherit;

  text-decoration: dotted;

  transition: color 0.25s ease;

}

#yay a:hover {

  filter: blur(0.1rem);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

  transition: all 0.3s ease-in-out;

  text-decoration: dotted;

  color: #636363;

  font-style: italic;

}

::-webkit-scrollbar {

  width: 0; /* remove scrollbar space */

  background: transparent; /* to make scrollbar invisible */

}

::-webkit-scrollbar-thumb {

  background: transparent;

}

@font-face {

  font-family: lovely;

  src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);

}

​

</style>

i figured out the code here https://stackoverflow.com/questions/24977634/css-float-4-divs-in-a-square-order-float-left-only-2-and-4-does-not-work

<br>

​

<link href="https://fonts.googleapis.com/css?family=Bai+Jamjuree:500,500italic" rel="stylesheet" type="text/css"/>

<div id="first" class="divSquare">

  <div id="yay">

    <div id="textobody"><br><mark>title 1 ✿</mark> you can adjust the height of box in #yay styles. . . first scrollable box <br><br /> <mark>links</mark> <a href="http://web.archive.org/web/20220409145042/https://youtube.com/c/naocrrds">youtube</a> <a href="https://twitter.com/naocrrds">naocrrds </a><br><br /> </div>

  </div>

</div>

<div id="second" class="divSquare">

  <div id="yay">

    <div id="textobody"><br><mark>title 2</mark> second scrollable box <br><br /> </div>

  </div>

</div>

<div style="clear:both"></div>

<div id="third" class="divSquare">

  <div id="yay">

    <div id="textobody"><br><mark>title 3</mark> third scrollable box<br><br /> </div>

  </div>

</div>

<div id="fourth" class="divSquare">

  <div id="yay">

    <div id="textobody"><br><mark>title 4</mark> fourth scrollable box <br><br /> </div>