Is there a way to conceal overridden div borders? When two divs are in conflict, eliminate borders only from the overridden region

I am facing an issue with two overlapping div elements. I need to remove the border from the area where they overlap only. Take a look at the code snippet below:

<div style="width:100px; height:20px; background-color:#5475b1;border: 2px solid;"></div>
<div style="width:150px; height:200px; background-color: #5475b1;border: 2px solid;"></div>

When rendered, this code will appear as shown in this image.

However, my desired output is illustrated in this image. How can I achieve this? Your assistance would be greatly appreciated.

Please note that I am currently working on a drop-down menu. The first div represents the menu name, while the second div serves as the menu list.

htmlcssangularbootstrap-4sass

Answer №1

There are a variety of techniques to achieve this effect, but the underlying mechanics remain similar. One approach is:

  1. The tab element does not have a border at the bottom.
  2. The menu element slides up underneath the tab element to match the thickness of the border.

Take a look at this example (just a quick and basic demonstration) with explanatory comments within the code:

nav div {
    background-color: yellow;
    padding: 20px;
}

.tab {
    position: relative;
    width: 100px;
    margin-left: 50px;
    text-align: center;
    /* no bottom border */
    border-top: 4px solid red;
    border-right: 4px solid red;
    border-left: 4px solid red;
    /* bring tab to the front*/
    z-index: 10;
}
.menu {
    width: 300px;
    /* border all around */
    border: 4px solid red;
    /* element in the background */
    z-index: 9;
    /* move the menu up = slide under tab */
    position: relative;
    top: -4px;
}
<nav>

    <div class="tab">Menu Tab</div>

    <div class="menu">
        Menu Item<br>
        Menu Item<br>
        Menu Item<br>
        Menu Item<br>
        Menu Item<br>
        ...
    </div>

</nav>

Answer №2

Take a look at this snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
#divTop {
  height:20px; 
  width:100px;
  background: #5475b1; 
  border: solid black;
  border-width: 2px 2px 0;
  position: relative;
  transform: translateY(3px);
}
 
 #divBottom {
  height:200px;
  width:150px; 
  background: #5475b1; 
  clear: both; 
  border: 2px solid black;
}
    </style>
</head>
<body>
    <div id ="divTop"  ></div>
    <div id ="divBottom" ></div>
</body>
</html>

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

Tips to stop scrolling when clicking on a link in a Vue.js carousel

How can I prevent the page from scrolling when clicking on a link in a Vue.js carousel? I've created a carousel card to mimic the ones found on Netflix's main page. It works fine on a single component but when I add multiple carousel components ...

htmlcssvue.js

Attempting to get the boxes in the final row to show up

Exploring new territories in web design, I'm currently working on achieving the layout shown below: Box Layout I've encountered an issue where the last row of 4 boxes in the middle section is not appearing as intended. Once this row is successfu ...

htmlcss

Eliminate JSON data that pertains to dates that are either in the past or future

I am working on integrating upcoming classes and past classes components into my application. I have successfully stored the schedule of classes and can retrieve them using backend services. However, I need to display only the upcoming classes in one compo ...

javascriptangulartypescript

How can I display a particular section of my JSON data in an AngularJS application?

Below is an example of a JSON structure: {"years":[ { "year_title":"94", "months":[...] } { "year_title":"95", "months":[...] } { "year_title":"96", "months":[...] } ]} I was able to display the data using the code sni ...

javascriptangularjsjsonhtml

Desiring the standard back button feature of a browser to work seamlessly when loading pages via ajax requests

I am currently developing a web application in PHP and implementing the use of AJAX requests to retrieve pages from the server. For example, when a user clicks on menu tabs, an AJAX request is made to the server to fetch the page and load it into a specifi ...

phpjqueryhtmlajax

Is it possible to rearrange column order in Bootstrap 4x according to different viewport sizes?

One of the great things about Bootstrap is its ability to rearrange columns regardless of the HTML structure. However, I am looking to have a different order of elements when the viewport size is smaller (e.g., Mobile). The current HTML structure looks li ...

htmlcssbootstrap-4

Errors abound in Angular's implementation of custom reactive form validators

When validating a form for a call center, the fields are usually required to be filled in a specific order. If a user tries to skip ahead, I want to raise an error for multiple fields. I have discovered a method that seems to work as shown below: export ...

angulartypescriptangular-reactive-forms

At times, the CSS fails to load at first and does not refresh correctly when using F5 or CTRL F5, yet it occasionally loads when clicking on links

After dedicating a full day to trying to solve this issue, I am reaching out for some assistance. As a newcomer here, I apologize if this question has been asked before (I did search extensively and found nothing). The website I'm constructing for my ...

csscachinghtml-parsingloading

What is the best way to ensure that the body element is as large as the html element?

My goal is to have the body extend as the page size increases. I attempted setting the height of the body to 100% and the height of the html element to 100%, but it didn't produce the desired outcome: In this illustration, blue represents the body an ...

htmlcss

Using scripted <svg> with <defs> and attempting to reference it via JavaScript results in failure

My goal is to dynamically generate svg path elements in html using JavaScript. I would like to place these paths within a <defs> element so that they can be reused later in <use> xlink:href elements. However, after creating the paths (by pr ...

javascripthtmlsvg

Mapping JSON data containing a collection of objects as an observable, rather than as an observable array, is an

When developing my webpage, I needed to receive a viewmodel of a user account via Json. The data includes essential user details such as real name and email address. Additionally, I wanted to display (and modify) the groups that the user belongs to, along ...

javascripthtmlknockout.jscollectionsmapping

When I click on "Submit", it redirects me to the PHP page

I've followed a tutorial on creating custom PHP contact forms at this link: and made some modifications to the form for my specific requirements. However, when I click the Submit button on the form, it redirects me to the PHP page. What I actually w ...

phphtmlformsemailsubmit

Craft unique looks for both even and odd Tumblr posts

I recently came up with a unique idea for a Tumblr theme where the design of posts changes based on whether they are even or odd in the sequence. While I have experience with basic HTML coding, delving into Tumblr customization is new to me. Here's wh ...

htmlcsstumblr

Creating a JavaScript function for a custom timed traffic light sequence

Currently, I am facing a challenge with my high school project of creating a timed traffic light sequence using JavaScript for my upcoming exams. Unfortunately, I feel quite lost and unsure about how to proceed. My initial plan involves formatting the valu ...

javascriptcss

The button values fail to adhere to the specified input length in the Point of Sale application built with Angular

Having an issue with my Point of Sale app. When I enter values using the keyboard, it respects the maxLength limit, but when I enter values using the buttons, it does not respect the limit. Any ideas on how to solve this? <div mat-dialog-content> < ...

angular

Having trouble importing the "@angular/material" module

I'm completely new to working with the MEAN stack and currently running into issues with Angular's material module. I am attempting to bring in the "@angular/material" module into my code, but encountering an error each time I try to import it. T ...

javascriptnode.jsangularangular-materialmean-stack

Execute PHP function by clicking on an HTML anchor tag

I'm curious - can a PHP function be triggered simply by clicking a link, or is it better to stick with the form submit method? If linking works, where should the reference point to? Check out this code snippet: <?php session_start(); func ...

phphtmlfunction

Having trouble with selecting checkboxes in a div using jQuery? While it may work in IE and Firefox, Chrome seems to be causing issues

In my div, I have several checkboxes placed under labels for formatting purposes. There is a list of checkbox names that need to be checked upon certain actions. Here is the list: var columns= ['2','5','4'] This is the curren ...

javascriptjqueryhtmlinternet-explorergoogle-chrome

Transfer an image to the top of a cell

I'm trying to position the image at the top of the cell, but I've hit a roadblock. Here's a preview of the web photo: https://i.sstatic.net/U3XK9.png Here is my CSS code: #animes { width: 130px; height: 100px; display: block; padd ...

htmlcssweb

"Utilizing Bootstrap to add borders to div elements is a

https://i.sstatic.net/yPt46.png Hey there! I am working on a project using bootstrap 4. I encountered an issue that I can't seem to solve. I placed an image inside a div, set the div's height and width to 200px with overflow hidden. The image w ...

htmlcssbootstrap-4