Add elements on all the four sides of a div - html

Question

I am trying to add an element on all the 4 sides of the div.
I don't want to use box-sizing as I have to apply event listeners on the elements that I would place on all the 4 sides.
I am able to add it to the left and right but how can I add it on all the 4 sides? And this also is not an elegant way.
.box {
width: 100px;
height: 100px;
background: yellow;
text-align: center;
font-size: 0.8rem;
position: relative;
}
#sideEl {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#sideEl2 {
background-color: red;
position: absolute;
right: 0;
bottom: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
<div class="box">
<div id="sideEl">
<div id="sideEl2">
</div>
I had referred Placing 4 html elements in every corner of a div . But not able to get an idea how to place them along side borders

Answer 1

I swapped the height and width parameters for horizontally aligned elements so they are showed as intended. Also you should only be using one of those option ( top right bottom left ) to align element to one of four sides. Here's the code:
.box {
width: 100px;
height: 100px;
background: yellow;
text-align: center;
font-size: 0.8rem;
position: relative;
}
#sideEl {
background-color: red;
position: absolute;
top: 0;
height: 4px;
width: 100%;
cursor: w-resize;
}
#sideE2 {
background-color: brown;
position: absolute;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#sideE3 {
background-color: blue;
position: absolute;
right: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#sideE4 {
background-color: green;
position: absolute;
bottom: 0;
height: 4px;
width: 100%;
cursor: w-resize;
}
<div class="box">
<div id="sideEl"></div>
<div id="sideE2"></div>
<div id="sideE3"></div>
<div id="sideE4"></div>
</div>

Answer 2

Add the two other divs and use :
a class to identify (style in other words) a side, let's call it side, that'll be used by the divs that act as sides. This class holds mutual styles for the sides like the background-color and the position.
two additional classes :
side-h which is used by the sides that are horizontal (top and bottom sides). It holds the width and height for these specific sides as they do share the same values. Also, these sides have cursor: n-resize rule for a vertical cursor.
side-v which is used by the sides that are vertical (right and left sides). It holds the width and height for these specific sides as they do share the same values. Also, these sides have cursor: w-resize rule for an horizontal cursor.
the #side-top and #side-left hold the same values for top and left rules.
the #side-bottom and #side-right hold the same values for bottom and left rules.
.box {
width: 100px;
height: 100px;
background: yellow;
text-align: center;
font-size: 0.8rem;
position: relative;
}
.box .side {
position: absolute;
background-color: red;
}
.box .side.side-h {
width: 100%;
height: 4px;
cursor: n-resize;
}
.box .side.side-v {
width: 4px;
height: 100%;
cursor: w-resize;
}
#side-top, #side-left {
top: 0;
left: 0;
}
#side-right, #side-bottom {
bottom: 0;
right: 0;
}
<div class="box">
<div class="side side-h" id="side-top"></div>
<div class="side side-v" id="side-right"></div>
<div class="side side-h" id="side-bottom"></div>
<div class="side side-v" id="side-left"></div>
</div>
the ordering of the elements inside .box can be changed without affecting the final result.

Answer 3

.box {
width: 100px;
height: 100px;
background: yellow;
text-align: center;
font-size: 0.8rem;
position: relative;
}
#sideTop {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
cursor: w-resize;
}
#sideRight {
background-color: red;
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#sideBottom {
background-color: red;
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 4px;
cursor: w-resize;
}
#sideLeft {
background-color: red;
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
<div class="box">
<div id="sideTop"></div>
<div id="sideBottom"></div>
<div id="sideRight"></div>
<div id="sideLeft"></div>
</div>

Answer 4

I hope you may get the idea...
.main-container {
width: 400px;
height: 400px;
background-color: #ccc;
}
.child {
float: left;
}
.child:nth-child(odd) {
height: calc(100% - 50px);
width: 50px;
background-color: blue;
}
.child:nth-child(even) {
height: 50px;
width: calc(100% - 100px);
background-color: red;
}
.child:nth-child(4) {
width: 100%;
}
<div class="main-container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>