Can an element be positioned in relation to the border-box of its parent element?

Check out this jsfiddle for an example:

http://jsfiddle.net/apmmw2ma/

<div class='outer'>
    <div class='inner'>
        Inner.
    </div>
    Outer.
</div>
div.outer {
    position: absolute;
    left: 10px;
    top: 10px;
    border: 5px solid green;
    padding: 10px;
}
div.inner {
    position: absolute;
    left: 0;
    top: 100%;
    border: 10px solid red;
    padding: 15px;
}

In the example, the "inner" box (with a red border) is positioned relative to the outer's padding-box: left:0 places it just next to the outer's border, and top:100% means "100% of the content plus padding, but not the border."

However, adding box-sizing: border-box to the outer div does not seem to have any effect.

I am looking to position a child element directly below its parent's border-box, so that the two borders align no matter their thickness. Is this achievable?

Answer №1

Regrettably, achieving this without prior knowledge of border widths is not feasible. If the border widths are unknown or dynamic, then it becomes quite challenging to accomplish.1

The space within an element's containing block is specifically defined as the padding edge of the element that creates the containing block. This principle is clearly articulated in the specification, and it serves a deliberate purpose; descendants are generally expected not to extend beyond the boundaries of their container unless the container has an overflow: visible property without establishing a BFC (and even then, the impact is purely visual and does not affect layout). Otherwise, the concept of a border loses its significance.

In cases where you want elements to interact based on their borders or outer edges, arranging them as siblings rather than ancestors and descendants is preferable. At the very least, they should be considered unrelated entities2.

This appears to be an oversight; the interpretation of top: x% ought to rely on the parent element's box-sizing value...

The function of box-sizing is to alter how a box's size is computed (i.e., whether the padding or borders contribute to the dimensions specified by width and height); although it can modify the size of an element's padding box, the area of the containing block, if one exists, is still determined by that padding box.


1 This issue could potentially be resolved using custom properties, provided that the same custom property is assigned to both the parent's border width and the child's respective offsets, essentially emphasizing the necessity of knowing the border widths beforehand or having some level of control over them.

2 Floats, for instance, exhibit a strong inclination towards the border edge of boxes, to such an extent that they might seemingly collapse margins in situations where such behavior would not typically be anticipated.

Answer №2

Regrettably, achieving this without repeating the parent's border width value is not currently possible.

Nevertheless, if repeating the border width value is an acceptable solution for you, then you can use the following approach:

div.inner {
    top: <desired top value, for example 100%>;
    margin-top: <parent’s border-bottom-width>;
    left: <desired left value, for example 0>;
    margin-left: -<parent’s border-left-width>;
}

In the future, when calc() is widely supported, you will be able to achieve the same result using it:

div.inner {
    top: calc(<desired top value, for example 100%> + <parent’s border-bottom-width>);
    left: calc(<desired left value, for example 0> - <parent’s border-left-width>);
}

In my hopeful vision for the future, I wish for the ability to reference the property values of ancestors within a calc() expression. This would allow me to write something like:

/* Imaginary code that remains a dream */
div.inner {
    top: calc(100% + parent.border-bottom-width);
    left: calc(0 - parent.border-left-width);
}

Answer №3

Implementing the box-shadow property

Here is an example that demonstrates how to use the box-sizing model effectively:

http://jsfiddle.net/xyzabc123/9/

-webkit-box-shadow:inset 0px 0px 0px 5px blue;
-moz-box-shadow:inset 0px 0px 0px 5px blue;
box-shadow:inset 0px 0px 0px 5px blue;

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

Answer №4

Consider utilizing the display:table; property for the main container.

Here is a working example on JSFiddle: http://jsfiddle.net/apmmw2ma/9/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a distinct CSS animation 'origin' declaration for every <g> element

I am using CSS animation to apply a 'wobble' effect to each letter within a word. The letters are represented by SVG groups <g>. However, in the provided example, the wobbling effect becomes more pronounced with each subsequent letter, wher ...

Challenges with personalized music player

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/CSS"> #custom{ font-family: monospace; font-size: 16px; max-width: 650px; ...

How can I dynamically unload a JavaScript file that was previously loaded with RequireJS? Alternatively, how can I handle exclusive dependencies or reset RequireJS?

I'm facing a dilemma with two JavaScript files that cannot be loaded simultaneously. One needs to be unloaded before the other can be loaded when a specific button is clicked. Here's an outline of my current approach: //pseudocode if user click ...

Ways to decrease the saturation of a background image within a div using CSS

I've come across many plugins that can desaturate an image within the tag. However, I haven't been able to find a solution for desaturating a background image that is used for an element (div). Is there a way to desaturate the background image ...

Executing functions after the completion of a CSS animation

I am currently utilizing Vue3. I have implemented a feature where the box grows in size when the mouse hovers over it. .curl:hover { width: 200px; height: 200px; } I am looking for a way to notify the user once the animation is complete and the size has ...

Achieving centered text alignment in a span using Bootstrap 5

I am facing an issue with a span in an input group that has a minimum width of 6rem. This is causing the text to not be centered, as spans typically adjust to the width of the text itself. .input-group-text { min-width: 6rem; } <link rel="stylesheet ...

Tips for wrapping a div element around another div at the top left corner

I am working with a particular layout. <div class="comment"> <div class="leftpart"> </div> <div class="rightpart"> </div> </div> When viewing on a desktop, I maintain the original styling where each div is in its own s ...

Adjust the size of a div element after updating its content using Mootools

I am currently utilizing mootools 1.2 on a basic webpage. There is a div that contains a form (referred to as formdiv) which is submitted through JS/ajax. Once the ajax request returns a "confirmation message" data, the formdiv updates accordingly. The is ...

Tips for keeping a video background stationary while allowing the text to move smoothly

When I added the video for the background, it only appears at the top of the page. However, I want it to be visible as the rest of the page is scrolled. <div class="hero"> <video autoplay loop muted plays-inline class="back-video&qu ...

The basic jQuery script seems to be malfunctioning

I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...

Is there a way to randomly change the colors of divs for a variable amount of time?

I have a unique idea for creating a dynamic four-square box that changes colors at random every time a button is clicked. The twist is, I want the colors to cycle randomly for up to 5 seconds before 3 out of 4 squares turn black and one square stops on a r ...

Selenium WebDriver is having trouble locating an element

Currently, I am employing the latest version of selenium webdriver. The issue arises when Selenium fails to locate an element (specifically an input field). Here is the relevant HTML code: <input id="findPath" class="pathCom" type="text" style="width: ...

The hamburger menu icon is not visible

I recently built a website and aimed to ensure it had a responsive design. Following a tutorial on YouTube, I implemented everything exactly as shown in the video. However, I encountered an issue with the hamburger icon not appearing. Can anyone shed som ...

"Crafting a sleek card design using Material UI components in React JS

Exploring the world of material UI and looking to create a card with an image and footer. However, I'm facing challenges as there is no default option for adding a footer in the card. https://i.stack.imgur.com/xlxyb.png I want the image to be center ...

Utilizing headless WordPress and React for an innovative web development approach, incorporating styles seamlessly in both the

I am looking to create a headless WordPress + React website. So far, I have successfully set up the "non-gutenberg" elements like the header and footer. Everything seems to be working fine on that front. However, I am facing an issue with the styling of t ...

I am experiencing a situation where my content is overflowing but the scroll feature is

After making my website dynamic, I encountered an issue where the content overflow on the home page prevented me from scrolling to the bottom of the page. Here is a link to my website for reference: ...

Clashing CSS Styles: Font Size Edition

Can someone explain how CSS font sizes work? I set a specific line to be 200% font size, but changing the body font size affected it. Shouldn't the line maintain its specified size? When the body font size is changed from 12pt to 8pt, the line "There ...

Why are all new elements in a loop added to the last element using AppendChild?

I'm currently in the process of looping through a series of divs that contain unique IDs for YouTube videos. My goal is to retrieve and display their titles, descriptions, and other information. The div elements I am iterating through have a similar s ...

How can I invoke a TypeScript function within HTML code?

Currently, I am working on an Angular project where I have implemented two straightforward methods in a TypeScript file: findForm(text: string, forms: Array<string>) { for (let form of this.forms) { if (text.includes(form)) { retur ...

Safari alters the header color on mobile devices

Debugging this issue has been quite challenging - the number at the top of the page appears in white before changing to a dark grey on iPad and iPhones running Safari. Why is this happening?! It functions correctly on all other devices! Check out www.col ...