Add elements on all the four sides of a div

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

score 3 · Answer 1 · answered Aug 25 '19 at 03:45

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>

This answer was also correct , but dont know why the left and right elements were slightly displaced from the top and pushed down a bit in my html ,might be due to some other styles in my html code — Enthu, Aug 25 '19 at 05:52

ThS · Accepted Answer · 2019-08-25T04:00:50.640

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.

@Enthu when using pseudo-elements you can't attach events to them. — ThS, Aug 25 '19 at 09:57
oh so in the above link it is doing something different is it , I mean it would be great if you explain a bit :) , thanks — Enthu, Aug 25 '19 at 11:29
@Enthu he triggers the drag only if the user clicks on the border (see the calculation made in his code). — ThS, Aug 25 '19 at 11:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198439/discussion-between-enthu-and-ths). — Enthu, Aug 25 '19 at 11:43

score 0 · Answer 3 · answered Aug 25 '19 at 03:49

.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>

score 0 · Answer 4 · answered Aug 25 '19 at 03:56

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>

Add elements on all the four sides of a div

4 Answers4