Issue with positioning div elements in a web calendar

Question

I am writing an html calendar and got stuck on positioning divs. I generate the divs dynamically and they stack on top of each other which is ok most of the time. Some times I need to create a div and have it placed at the top of the page right next to the first created div. If I use float it moves over too far and does not go to the top. I could use position to accomplish this, but it gets complicated. Just seems it should be easy to drop it up to the top like it would in a table using valign=top. I added some css positioning to show where I want the div, but if possible, I would like to do it without position. Any suggestions on good ways to position a div would be much appreciated.

#container{
  width:200px;
  height:200px;
  background-color:blue;
}

#item1{
  width:50px;
  height:50px;
  background-color:red;
}

#item2{
  width:50px;
  height:50px;
  background-color:yellow;
}

#item3{
  width:50px;
  height:50px;
  background-color:green;
  float: right;
  position:relative;
  top:-100px;
  left:-100px;
}

<div id=container>
  <div id=item1></div>
  <div id=item2></div>
  <div id=item3></div>
</div>

Answer 1

Perhaps you should look at using a grid layout in the cell . you would have much better control of how the content appears in the cell without having to work with floating div's .Also a layout in a grid container keeps things uniformed and prevents overlapping using

grid-template-columns: auto auto auto;

If you only want 2 columns at the top just change it to

grid-template-columns: auto auto ;

here is a link grid layouts

and

flexbox vs grid

#container{
  width:200px;
  height:200px;
  background-color:blue;
display: grid;
grid-gap: 2px;
grid-template-columns: auto auto auto;
grid-template-rows: 60px auto auto;
}

#item1{

  width:50px;
  height:50px;
  background-color:red;
}

#item2{
  width:50px;
  height:50px;
  background-color:yellow;
}

#item3{
  width:50px;
  height:50px;
  background-color:green;

 
  
}

<div id=container>
  <div id=item1></div>
  <div id=item2></div>
  <div id=item3></div>
    <div id=item3></div>
      <div id=item3></div>
       <div id=item1></div>
        <div id=item1></div>
         <div id=item1></div>
</div>

Answer 2

Let's call the calendar tiles "source divs", and for the div you want to appear positioned to the right of the 1st "source div", we'll ascribe the term "target div".

I recommend that you position your target div inside of the source div. This semantic relationship will make it very easy to position the target div correctly, using left: 100%;:

.calendar { font-size: 0; }
.src {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 30px; height: 30px;
  outline: 1px solid #000;
}
.src:hover:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%; height: 100%;
  left: 100%; top: 0;
  background-color: #ff0000;
}

<div class="calendar">
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <br/>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <br/>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
 </div>

Hover any source div to see the corresponding target div.