Superior method to ensure the child element's border overlaps with that of the parent

I am currently working on a project that requires a unique CSS effect:

Let me explain exactly what I am trying to achieve:

The main element (referred to as the title) has padding and a 2px bottom border. Inside this, there is a child element (known as title-inner) which also has padding and a 2px border but in a different color, creating an overlapping effect with its parent (title).

This is the structure I am using:

<div class="title">
    <div class="title-inner">Widget title</div>
</div>

I understand that achieving this effect will require adjusting the padding and margin properties of both elements, however, the CSS I have written so far does not respond well on mobile or when resizing the browser window (you can see it in action here: this fiddle).

Is there a more effective way to accomplish this CSS effect? Any suggestions?

jqueryhtmlcssfrontend

Answer №1

Instead of applying padding to both the child and parent elements, consider giving the padding only to the child element. Then, add a negative margin to ensure that the borders overlap each other.

body {
    background: black;
    color: #333;
    font-family: Arial, sans-serif;
    margin: 1em;
}

.title {
    border-bottom: 3px solid #ccc;
}

.title-inner {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 12px;
    margin-bottom: -3px;
    border-bottom: 3px solid #FACD98;
}
<div class="title">
    <span class="title-inner">Lorem Ipsum</span>
</div>

Answer №2

The most effective approach, in my opinion, involves utilizing background, divs, and width properties.

Check out the Animation Demo here

By using div elements instead of borders, you gain greater control over the layout of your elements.

<div class="title">
    <div class="title-inner">Lorem Ipsum</div>
    <div id='line'>
        <div id='load'></div>
    </div>
</div>

Once the div elements are in place, apply the following CSS styles:

body {
    background: black;
    color: #ddd;
    font-family: Helvetica, sans-serif;
    margin: 2em;
}
.title-inner {
    padding: 17px;
}
#line {
    background-color:purple;
    height:2px;
    width:100%;
}
#load {
    background-color:yellow;
    height:100%;
    width:0%;
}

Finally, enhance the functionality by adding some JavaScript code:

   function loop() {
        $('#load').animate({
            width: "50%"
        }, 1600);
        $('#load').promise().done(function () {
            $(this).width(0);
            loop();
        });

    }
loop();

Answer №3

One alternative approach is utilizing absolute positioning for the child element:

.heading {
    border-bottom: 2px solid;
    position: relative;
    padding-bottom: 20px;
    height: 20px;
}

.heading-content {
    display: inline-block;
    position: absolute;
    width: 50%;
    height: 100%;
    border-bottom: 2px solid #E64998;
}

It is worth noting that I included the 50% width based on your provided image example.

http://jsfiddle.net/v1ut1pyv/5/

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

Managing data and files in a single AJAX request: A guide on handling POST requests sent by JS FormData

I'm currently encountering an issue and I sought guidance from this thread: Data and files in one ajax Following the example provided, my implementation code looks like this: $("form#data").submit(function(){ var formData = new FormData($(this)[0] ...

phpjqueryajaxfile-upload

Transferring files to Django using AJAX

I am struggling with the process of uploading files to django using ajax. The upload is done within a modal window. The Form <div class="modal fade bs-example-modal-lg" id="fileUploadModal" role="dialog" aria-hidden="true"> <div class="modal ...

javascriptjqueryajaxdjango

Leveraging the power of JavaScript in conjunction with the assistance of

Here is some code I have put together following previous suggestions. I would appreciate any assistance on how to efficiently use jQuery to ensure this code functions properly. Thank you in advance! $(document).ready(function() { se ...

jquerydjango

Make sure to validate a form when submitting from an external source rather than through an HTML

In my form, there are various input fields (some acting as inputs even if they're not). Each field is validated upon submission by angular validation and html attributes like required, ng-maxlength, minlength, etc. Now, we want to implement a keyboar ...

javascriptjqueryangularjshtml

How can I stack one column beneath two columns in a unique format?

I am looking to create a layout similar to the one depicted below. https://i.sstatic.net/m1aCj.png The window is represented by the red box, and the black boxes represent the <div> elements. I have attempted to arrange the image into two columns, bu ...

htmltwitter-bootstrapbootstrap-4

Understanding Aspect Ratios in CSS for Div Containers and their Components

I am crafting an HTML5 game without the use of canvas and aiming to maintain a 16:9 aspect ratio within my div. Thanks to javascript, achieving this is straightforward and it functions flawlessly. However, the elements inside the div occasionally appear to ...

javascriptcsshtml

Encountering issues with the hyperlink tag '<a>' in an HTML document

I've encountered an issue with the code on my HTML page: <body> <div align="center"> <a href="../index.html"> <img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base"> &l ...

javascriptjqueryhtml

Transfer the SVG element from one div to another with a simple copy and paste

Is there an easy way to copy and paste the svg element from one div to another? I attempted to use a method involving JavaScript, as shown below. Circle = document.createElementNS("http://www.w3.org/2000/svg", tagName); Circle.setAttribute("c ...

jquerysvg

How to retrieve only the last value from a JSON object using jQuery's .html

I'm having an issue with jQuery("#someID").html. It seems to only display the last name from the JSON data. Here is the javascript code: <div class="row" id="fetchmember"> <script type="text/javascript"> jQuery('#group').cha ...

javascriptjqueryjson

Troubleshooting z-index conflict when using :before pseudo element to emphasize list entries

I am experiencing an issue with highlighting items in a list generated by JSTree using the :before pseudo element. The z-indexes seem to be causing some trouble, as adjusting them results in the highlighting appearing either behind all links or in front of ...

csscss-selectorsz-indexjstree

There appears to be an issue with the functionality of the external CSS pathway

placeholder image hereplaceholder image hereplaceholder image here I'm encountering a problem and struggling to identify the mistake in my current approach. ...

javascripthtmlcssnode.jsexpress

The function for displaying checked text is currently malfunctioning when I attempt to open a new tab

I am attempting to display the checked value text in one div. https://i.sstatic.net/rXfai.png By default, Tiffen is active. When I click on idly and puri images, the text of that image appears and shows in the selected food list. However, when I click o ...

phpjqueryajaxactiverecordcheckbox

Tips for calculating the distance from the cursor position to the visible area

Is there a way to determine the cursor's offset from the top of a textarea's view rather than its position? While e.target.selectionStart provides the cursor position, $el.scrollTop gives the scroll offset of the textarea. Any suggestions on ho ...

javascripthtmlcss

What is the best way to show an HTML file in a WebBrowser using C++?

Currently, I'm facing the challenge of displaying an HTML file in a WebBrowser within a Windows application. The issue lies in the fact that I am dealing with a local file instead of a URL. My attempted solution with file://MyWeb.html proved unsuccess ...

htmlc++url

Setting the default in jQuery and Rails when the document is ready

Currently, I have a set of anchor tags that serve as a filter. I am utilizing jQuery to find the relevant data tag so that when a name is clicked, it will display all the work done by a developer from a list of completed items. To add a touch of elegance, ...

jqueryruby-on-railsdefaultpageload

What is the best way to access bootstrap col and row styles without needing to import the entire framework?

I am currently in the process of developing a react app using styled-components and I am looking to design a component that mimics the functionality of the col col-x classes from bootstrap. Additionally, I also want to create another component for the row ...

cssreactjstwitter-bootstrapbootstrap-4

Tips for maintaining the cleanliness of PHP-generated HTML output in the 'View Source' option

I've been noticing a problem today while examining the source code on a website. I typically use PHP output in my templates to generate dynamic content. Initially, the templates are written in HTML only, with clean indentation and formatting. The PHP ...

phphtmlbrowser

HTTP GET request not updating data

I'm experimenting with AngularJS and trying out some examples: Here's the HTML code snippet: <html ng-app="myApp"> <body ng-controller="JokesController"> <h1>{{ joke }}<h1> </body> </html> A ...

javascripthtmlangularjsangularjs-directiveangularjs-service

When using angular's ngHide directive on a button, it will still occupy space in the

At the bottom of this HTML file, there are 3 buttons displayed. The first image illustrates the layout of the 3 buttons. The second image demonstrates what happens when the middle button in the footer is commented out. The third image shows the situat ...

htmlcssangularjs

Using a MySQL statement within a conditional statement

Looking to modify this code to display different information based on the values retrieved, here is the current code: $sql_doublecheck = mysql_query("SELECT * FROM adminpage WHERE setting='main' AND close_site='1'"); $doublecheck = mys ...

phphtmlmysql