Place items along the perimeter of a div on each of its four sides

Question

Place items along the perimeter of a div on each of its four sides

My goal is to add an element on all four sides of the div without using box-sizing. The challenge is that I need to apply event listeners to these elements once they are placed.

Currently, I can add elements to the left and right sides, but I'm struggling to figure out how to position them on all four sides in a more 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>

https://i.sstatic.net/Um0KM.png

I came across a post about Placing 4 html elements in every corner of a div, but I haven't found a solution yet for placing them along all sides of the borders.

html css

Answer 1

Answer №1

I made a simple adjustment to ensure that horizontally aligned elements display properly by swapping the height and width parameters. Remember, when aligning an element to one of the four sides, you should only use one of the options - top, right, bottom, or left. Here's the revised code snippet:

.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

I made a simple adjustment to ensure that horizontally aligned elements display properly by swapping the height and width parameters. Remember, when aligning an element to one of the four sides, you should only use one of the options - top, right, bottom, or left. Here's the revised code snippet:

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

Answer №2

To create a visually appealing layout, you can add classes to identify different sides of your div elements. Here's how you can achieve this:

Create a class called side to style the sides of your div elements collectively. This class will contain properties like background-color and position.
Introduce two additional classes:
- side-h for horizontal sides (top and bottom), defining specific values for width, height, and applying cursor: n-resize.
- side-v for vertical sides (right and left), with unique values for width, height, and setting cursor: w-resize.
Assign identical values for #side-top and #side-left regarding the top and left rules.
Set common values for #side-bottom and #side-right in terms of 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>

You have the flexibility to rearrange elements inside .box without impacting the overall design.

Answer 4

To create a visually appealing layout, you can add classes to identify different sides of your div elements. Here's how you can achieve this:

Create a class called side to style the sides of your div elements collectively. This class will contain properties like background-color and position.
Introduce two additional classes:
- side-h for horizontal sides (top and bottom), defining specific values for width, height, and applying cursor: n-resize.
- side-v for vertical sides (right and left), with unique values for width, height, and setting cursor: w-resize.
Assign identical values for #side-top and #side-left regarding the top and left rules.
Set common values for #side-bottom and #side-right in terms of 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>

You have the flexibility to rearrange elements inside .box without impacting the overall design.

Answer 5

Answer №3

.box {
  width: 100px;
  height: 100px;
  background: yellow;
  text-align: center;
  font-size: 0.8rem;
  position: relative;
}

#sideTop {
  background-color: green;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  cursor: w-resize;
}

#sideRight {
  background-color: green;
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}

#sideBottom {
  background-color: green;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  cursor: w-resize;
}

#sideLeft {
  background-color: green;
  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 6

.box {
  width: 100px;
  height: 100px;
  background: yellow;
  text-align: center;
  font-size: 0.8rem;
  position: relative;
}

#sideTop {
  background-color: green;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  cursor: w-resize;
}

#sideRight {
  background-color: green;
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}

#sideBottom {
  background-color: green;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  cursor: w-resize;
}

#sideLeft {
  background-color: green;
  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 7

Answer №4

I trust you have grasped the concept...

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

Answer 8

I trust you have grasped the concept...

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

Place items along the perimeter of a div on each of its four sides

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Lag experienced in Chrome browser on Mac due to Bootstrap CSS framework

Issues with Display on IE 11 and Edge

Creating a cascading layout with React Material-UI GridList

Utilizing AngularJS: Running a controller function within a directive

Hide the text if there is not enough space to show it fully

Is it possible to echo a CSS class using PHP?

Establish the default bootstrap theme mode specifically for print formatting

Transforming Jade into HTML

Get rid of the Parallax background feature in the Brooklyn theme

I am having difficulty with my ajax code and I am unsure of how to resolve it

Issue with page break functionality during print preview

Organizing HTML input elements in a single row

JavaScript Calendar and Clock Selector

Instructions for updating the Modal Value using ajax

I am having trouble retrieving multiple li elements within a ul tag, as I am only able to access one li element and not

Transferring information from an HTML file to Python

How can I maintain circle radius while resizing SVG to 100% width?

Changing the background color of a clicked checkbox can be done by using CSS

Can the width of an offcanvas panel be adjusted?

Is it necessary to utilize container or container-fluid within the grid system layout?