I am in the process of creating a website that features a consistent design element of an inset border surrounding a block of content within a <div>. This inset border is achieved using LESS/CSS, and is contained within a separate <div class="inset-border"> element that follows the content within a wrapper.
For the most part, this design approach is successful throughout the webpage. However, there is one particular section where the border is not inheriting its dimensions from the immediate parent wrapper, but instead from a higher level ancestor element. This is causing some issues. Why is this happening?
The CSS code responsible for rendering the border is as follows:
.inset-border {
border-style: solid;
border-color: #ffc174;
border-width: 1px;
height: 90%;
width: 90%;
position: absolute;
top: 20px;
left: 4%;
z-index: 1;
pointer-events: none;
}
The problematic snippet of HTML code:
<div class="update-container">
<div class="update-div">
<span class="small-title">Latest Updates</span>
<h2 class="slogan">@Html.Raw(title)</h2>
<a class="updates-button" href="@link">@buttonText</a>
</div>
<div class="inset-border"></div>
Here is an example where the inset border is functioning correctly:
<div class="whitebox-about">
<div class="col-md-6" style="padding-left:0">
<h2 class="slogan-right">@Html.Raw(rightblurb)</h2>
</div>
...
<div class="inset-border"></div>
</div>
What could be causing this issue?