Guide to extending the bottom border of a DIV to exceed the bottom border of its parent element

I am working on a row of DIVs that resemble menu items. Each item is contained within a parent DIV. When an inside DIV is clicked, it receives the active class. The parent DIV has a 2px grey bottom border, while the active child DIV gets a 6px green bottom border.

The functionality works correctly, but now I want the child's border to overlay the parent's bottom border, so that only the top 4 pixels of the green border are visible above the existing grey line.

I cannot simply apply the same styling to all other children because the parent container has a more intricate design that extends beyond the children.

div.parent {
  border-bottom: 5px solid grey;
  display: flex;
}

div.active {
  border-bottom: 10px solid green;
}
<div class="parent">
  <div class="child">whee</div>
  <div class="child active">whoo</div>
  <div class="child">whaa</div>
</div>

Is there a way to have the child's bottom border overlap the parent's by appearing 2 pixels lower (or using another method)?

htmlcss

Answer №1

To create more space between the elements, try setting a negative margin-bottom on the .child class:

div.parent {
  border-bottom: 5px solid grey;
  display: flex;
}

.child {margin-bottom:-5px}

div.active {
  border-bottom: 10px solid green;
}
<div class="parent">
  <div class="child">whee</div>
  <div class="child active">whoo</div>
  <div class="child">whaa</div>
</div>

Answer №2

Adding this code to the .active class may not achieve the desired look:

div.active {
  border-bottom: 10px solid green;
  padding: 0 5px;
  margin-bottom: -5px;
}

View demo

div.parent {
  border-bottom: 10px solid grey;
  display: flex;
}

div.active {
  border-bottom: 10px solid green;
  padding: 0 5px;
  margin-bottom: -5px;
}
<div class="parent">
  <div class="child">whee</div>
  <div class="child active">whoo</div>
  <div class="child">whaa</div>
</div>

Answer №3

One potential solution to consider is:

div.parent {
  border-bottom: 5px solid grey;
  display: flex;
}

div.active {
  position: relative;
  padding: 0 0 10px;
}

div.active:after {
  content: '';
  width: 100%;
  display: block;
  position: absolute;
  border-bottom: 10px solid green;
  bottom: -5px;
}
<div class="parent">
  <div class="child">whee</div>
  <div class="child active">whoo</div>
  <div class="child">whaa</div>
</div>

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

Guide on inserting a dropdown menu following a specific count of <li> elements using Javascript or Jquery

I am currently working on an HTML project <div class="ktmsg"> <ul> <li class="a1"> <a title="Link Tools" href="#"> … </a> </li> <li class="a2"> <a title="Link Tools" href="#"> ...

javascriptjqueryhtmlcss

Establish a predetermined selection for a drop-down menu

How can I set a default value for a dynamically filled dropdown menu featuring all 12 months in KnockoutJS? I want the default value to be the current month. This is how I am populating the dropdown with information: self.setMonthData = (data ...

javascriptjqueryhtmlknockout.jsdrop-down-menu

Manipulate the DOM to remove a checkbox using JavaScript

I'm brand new to exploring the world of Javascript and could use some guidance with this task. I have a collection of checkboxes that I'd like to manipulate so that when one is checked, it disappears from the list automatically. I've come ac ...

javascriptjqueryhtmlcheckboxchecked

Utilize the Tab key in Textarea fields to insert a tab character ( ) instead of navigating to the

My current issue involves utilizing an HTML textarea named userInput. Whenever I press the tab key, it simply shifts focus to the next element instead of inserting a tab character or some spaces within the textarea. Is there a way for me to configure the ...

javascriptjqueryhtmluser-interfacetextarea

Troubles arise when the left column shifts to the top with widths larger than 1440

Having a WordPress site with the Divi theme, I encounter an issue where the menu on the left-hand side is being displayed above the page content when the screen width exceeds around 1440 pixels. This problem persists on every page that contains this colum ...

csswordpressresolution

Tips for monitoring password and password confirmation fields in DevTools when using AngularJS forms

Within the ng-model, I have identified two variables: vm.user.password and vm.confirmpassword. The input fields are equipped with attributes such as id, name, and class. I am interested in monitoring both the password and confirmpassword values within Dev ...

javascripthtmlangularjs

Display the modal values in a hidden form field within a textarea, and then it will be automatically

Within my setup, there are two forms. The first form contains a textarea, while the second form appears in a modal. Below is the code for form 1. <div> <textarea name="dynamic-content-unit" id="dynamic-content-unit" class="for ...

jqueryhtmlformsbootstrap-modal

Adjusting the line-height in CSS dynamically based on the length of characters using jQuery

I am facing an issue with the Twitter widget on my website where our company's latest tweet sometimes gets cut off if it exceeds a certain length. I want to dynamically adjust the line-height CSS property of the element based on the tweet's chara ...

phpjavascriptjquerycss

Are there any alternatives similar to the reverse sr-only feature in Bootstrap 4?

I implemented the use of .sr-only to ensure compatibility with text-based browsers such as Lynx. This allows for the display of an ASCII logo in the header for those using standart GUI browsers like Firefox, while displaying the normal graphical logo for o ...

csshtmltwitter-bootstrapbootstrap-4

The application of document.body.style.backgroundColor is not compatible with an external CSS style sheet

Why does document.body.style.backgroundColor not work with an external CSS style sheet? I have the following CSS: body { background-color: red; } In my css style sheet, when I use JavaScript alert alert(document.body.style.backgroundColor);, it sh ...

javascripthtmlcss

Exploring the process of implementing a dynamic background image feature in Vue

Looking to create a dynamic navbar and change its background image. I attempted the following: Here is my attempt: <b-navbar toggleable="lg" v-bind:style="headerStyle"> this.headerStyle = { backgroundImage: &a ...

javascriptcssvue.jsfrontend

Customize the settings of the parent class in the child class through CSS

This issue has been on my mind for quite some time now, and despite trying various solutions, I haven't found a satisfactory fix. Within my style sheet, the following code is present: .message input[type='submit'] { background-color: g ...

htmlcss

JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Error: Unable to access the 'files' property"

Just a heads up, my JavaScript skills are pretty limited. Here is the current JavaScript code I have: $('#xhr-filebox').bind({ "dragover": HandleDragEvent, "dragleave": HandleDragEvent, "drop": HandleDropEvent }); function HandleDr ...

javascriptjqueryhtmlfile-uploaddrag-and-drop

Ways to apply CSS styles dynamically within a v-for loop

Despite searching through the VUE official website and various other sources, I have not been able to find a satisfactory solution. I am reaching out for assistance, thank you in advance. <div class="tag-item" :ref="`tagItem_ ...

cssvue.jsv-for

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: https://i.sstatic.net/fu89D.png My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. https://i.ssta ...

htmlcssflexbox

Here is a guide on how to specify function selection values for a total order. By default, the selection will have predetermined values, and upon clicking the sum button,

<tr id=""> <th> <select id="selection" onchange="myFunction()"> <option id="0" value="0">None</option> <option id="1" value="4.00">Women Suit</option> <option id="2" value="10.00">Dres ...

javascripthtml

Is there a way to identify a null dynamic source in Html5 audio?

The HTML5 audio element in my code does not point directly to an mp3 file, but rather to an action in a controller. This action returns either an mp3 file (FileResult) or null, which can take up to 1 minute to retrieve. To handle this delay, I have impleme ...

jqueryhtmlasp.net-mvcgoogle-chromehtml5-audio

Using Angular's ngFor directive to render 3 buttons in each row

I am attempting to show 3 buttons per div with the class "row". Using *ngFor to loop through the array to display buttons with the correct text. Here is a sample of my data: [{"NODE_ID":21.0,"NODE_DESC":"TERMINAL ASSEMBLY",&q ...

htmlangulartypescriptngfor

How can I stop iOS mobile browsers from automatically opening apps when I click on links?

Recently, I discovered an issue with my website when accessed on mobile (iOS). The links to external websites, such as Amazon product links, are causing the Amazon app to open instead of simply opening a new tab in the browser. The HTML code for these lin ...

javascriptjqueryhtmliosjquery-mobile

Guide on Generating Dynamic Div Elements for Counted Value in PHP

I am receiving a dynamic div based on a count in a separate box, but I would like to have 6 fixed small divs inside the container. If the count value is 10, the additional divs should be automatically added according to the dynamic value. Below is my code ...

phpjquerycsscodeigniterbootstrap-4