Arrange 4 divs (children) at each corner of the parent element

Question

Arrange 4 divs (children) at each corner of the parent element

Currently, I am facing a challenge in positioning 4 divs in the corners of their parent div. The HTML code structure is as follows:

<div class="resize">
    <div class="n w res"></div>
    <div class="n e res"></div>
    <div class="s e res"></div>
    <div class="s w res"></div>
</div>

The associated CSS styling is outlined below:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: relative;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
}

Despite the defined styling, the .res div elements are not aligning correctly at the corners...

If you have any insights on how to resolve this issue, please provide guidance.

Link to JSFIDDLE for reference

html css

Answer 1

Answer №1

To make the code work properly, you should update the position type of .res to absolute and add position:relative in the resize class.
It is important for absolute divs to be nested within a relative positioned parent to function correctly.
Give this a try:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

DEMO

Answer 2

To make the code work properly, you should update the position type of .res to absolute and add position:relative in the resize class.
It is important for absolute divs to be nested within a relative positioned parent to function correctly.
Give this a try:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

DEMO

Answer 3

Answer №2

If you want to achieve your goal, make sure to incorporate position:absolute; in the styling of the .res div elements. Remember that for an absolutely positioned div (such as .resize in your scenario), its parent should have a relatively positioned element.

For additional details, check out this resource.

Access the FIDDLE here

CSS :

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position:absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    position: relative;
    width: 100px;
    background: red;
    height: 100px;
}

Answer 4

If you want to achieve your goal, make sure to incorporate position:absolute; in the styling of the .res div elements. Remember that for an absolutely positioned div (such as .resize in your scenario), its parent should have a relatively positioned element.

For additional details, check out this resource.

Access the FIDDLE here

CSS :

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position:absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    position: relative;
    width: 100px;
    background: red;
    height: 100px;
}

Answer 5

Answer №3

Are you aiming for this specific outcome?

Here is the HTML code:

<div class="resize">
    <div class="n w res"></div>
    <div class="n e res"></div>
    <div class="s e res"></div>
    <div class="s w res"></div>
</div>

This is the CSS code:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Check out the demo to see it in action.

The utilization of the position property leads to the creation of a new block formatting context, which will be in relation to the nearest ancestor with a defined position property.

Answer 6

Are you aiming for this specific outcome?

Here is the HTML code:

<div class="resize">
    <div class="n w res"></div>
    <div class="n e res"></div>
    <div class="s e res"></div>
    <div class="s w res"></div>
</div>

This is the CSS code:

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Check out the demo to see it in action.

The utilization of the position property leads to the creation of a new block formatting context, which will be in relation to the nearest ancestor with a defined position property.

Answer 7

Answer №4

To achieve the desired layout, I suggest positioning the resizing div as relative and the four contained divs as absolute (assuming that the intention is for the four divs to be located within the resize div):

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: 0px; }
.resize .res.s { bottom: 0px; }
.resize .res.w { left: 0px; }
.resize .res.e { right: 0px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 8

To achieve the desired layout, I suggest positioning the resizing div as relative and the four contained divs as absolute (assuming that the intention is for the four divs to be located within the resize div):

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: 0px; }
.resize .res.s { bottom: 0px; }
.resize .res.w { left: 0px; }
.resize .res.e { right: 0px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 9

Answer №5

In order to resize the div, you must set the position relative for the outer div and position absolute for the inner div.

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 10

In order to resize the div, you must set the position relative for the outer div and position absolute for the inner div.

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 11

Answer №6

Make sure to include position: relative in .resize and position: absolute in .resize .res

Check out this example on jsfiddle

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

Answer 12

Make sure to include position: relative in .resize and position: absolute in .resize .res

Check out this example on jsfiddle

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

Answer 13

Answer №7

To ensure proper alignment, remember to declare parent as relative and child as absolute

Check out the demonstration here

If you haven't specified the position of the parent element, that could be the issue:

.resize{
   position: relative; /*make sure this is included */
}
.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute; /*this line was updated*/
}

Answer 14

To ensure proper alignment, remember to declare parent as relative and child as absolute

Check out the demonstration here

If you haven't specified the position of the parent element, that could be the issue:

.resize{
   position: relative; /*make sure this is included */
}
.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute; /*this line was updated*/
}

Answer 15

Answer №8

You have chosen to utilize position: relative for the small rectangles, signifying their position in relation to the original point.

In order to accurately position them in the corners, relative to their parent container, it is necessary to apply the following CSS:

.resize {
    position: relative;
}
.resize .res {
    position: absolute;
}

Feel free to view the updated JSFiddle demo

Answer 16

You have chosen to utilize position: relative for the small rectangles, signifying their position in relation to the original point.

In order to accurately position them in the corners, relative to their parent container, it is necessary to apply the following CSS:

.resize {
    position: relative;
}
.resize .res {
    position: absolute;
}

Feel free to view the updated JSFiddle demo

Arrange 4 divs (children) at each corner of the parent element

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Switch up text using jQuery on css-tricks.com

Tips for maintaining the original height of an image within an <img> element using HTML and CSS

What is the superior choice for developing a card game: creating it using SVG and the kinetic.js library or utilizing the oCanvas library

Matching Figures to their Descriptions

modifying the child divs contained in the main div

Exploring the Link Between jQuery and HTML

Exploring the Latest Features: Using Angular 7 with Bootstrap Collapse for Dynamic Aria-Controls

Image displayed in tooltip when hovering over

Issues with CSS transitions/animations not functioning properly across different browsers

What is the best way to align content in the center when its parent element has a position property

Creating personalized styles for my React components with the help of styled-components

Tips on automating the process of moving overflowing elements into a dropdown menu

After deploying to Firebase, animations suddenly cease to function

Guide on breaking up a string into separate lines

Google Chrome applying its unique style compositions

Python Django: Implementing Proper Spacing in HTML Email Titles

Is the presence of hidden list items leading to excessive white space?

Having trouble with the JavaScript DOM rewrite for aligning text?

Is there a way to make a TABLE expand to match the height of its surrounding element? (or, tackling sluggishness in IE with JavaScript)

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?