How to Nest a Div Within Another Div In HTML?

I need help creating a special title treatment Div that appears to extend beyond its parent div, as shown in the second picture. I have tried various methods but haven't been successful. Can someone assist me with this? I'm struggling with it and feeling overwhelmed by this specific scenario.

Desired Outcome:

Current Status:

The current code:

<header class="bgg">
  <div class="container h-100">
    <div class="row h-100 align-items-center">

      <div class="card text-white border-light bg-dark col-lg-3">
        <div class="cattitle">
          <center><a href="<?php echo URL; ?>forsale" class="cata">
                    FOR SALE</a></center>
        </div>
        <div class="card-body">
          <ul class="">
            <li><a href="#">Automobiles</a></li>
            <li><a href="#">Appliances</a></li>
            <li><a href="#">Baby & Kids</a></li>
            <li><a href="#">Books & Magazines</a></li>
            <li><a href="#">Cell Phones & Tablets</a></li>
            <li><a href="#">Computers</a></li>
            <li><a href="#">Electronics</a></li>
            <li><a href="#">Furniture</a></li>
            <li><a href="#">Motorcycles</a></li>
            <li><a href="#">Tools</a></li>
          </ul>
        </div>
        <a href="#" class="btn btn-sm btn-primary morelink">More</a>
      </div>



      <div class="card text-center col-lg-12 mt-4 selectionbox">
        <div class="card-header">
          <ul class="nav nav-pills card-header-pills">
            <li class="nav-item">
              <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>


    </div>
  </div>
</header>

<!-- Page Content -->
<div class="container">

  <div class="row">

htmlcsstwitter-bootstrap

Answer №1

Check out this demonstration showcasing how it can be achieved. Placed between the top div (.bgBlue) and the bottom div (.theCards), a .flyover div has been added to sit on top of the other two divs as per your request.

The key is to style the middle (flyOver) div in the following manner:

z-index: 1 ==> elevates the flyover div above the other two divs (which both have a default z-index value of 0)
float: left ==> positions it outside of the normal flow, allowing the bottom .theCards div to align with the top div
top: -50px ==> shifts the flyOver div up by 50px (overlapping the top div)
height: 50px ==> crucial for achieving the desired effect. The inner div INSIDE this one (.flyIn) is 100px tall – meaning it will extend beyond this div by 50px, overlapping the bottom div by that amount. With the flyOver div already raised by 50px to overlap the top div, and the inner div being 50px longer than the container, the overall visual effect matches your specifications.

* {position: relative;}
span{display:inline-block;width:90vw;color:white;text-align:right;padding-right:30px;border:1px solid yellow;}
.flex-parent{
  display:flex;
  width: 85%;
  margin:0 auto;
}
.bgBlue{
  height:250px;
  background: rgb(0,92,93);
  background: linear-gradient(0deg, rgba(0,92,93,1) 0%, rgba(9,9,121,1) 150%);
}
.inline-box{
  width:21.25vw;
  height:200px;
  border: 1px solid #ccc;
  background:darkblue;
}
.thecards{
  background: pink;
  text-align:center;
}
.inline-card{
  width: 18vw;
  height: 100px;
  margin: 0 2vw;
  text-align: center;
  color: white;
  border: 1px solid #ccc;
  background: grey;
}
.flyover{
  z-index:1;
  top: -50px;
  float:left;
  height: 50px; /* <=== 50px less than the .inFly div */
  width: 100vw;
  border: 1px solid green;
}
.inFly{
  width: 85vw;
  height: 100px; /*<== overflows the parent .flyover div by 50px */
  margin: 0 7.5vw;
  background:red;
  border:1px solid purple;
  color:white;
}
.centerText{
  display:flex;
  align-items: center;
  justify-content: center;
}
<div class="bgBlue"><span>Click FULL PAGE at top right...</span>
  <div class="flex-parent">
    <div class="inline-box"></div>
    <div class="inline-box"></div>
    <div class="inline-box"></div>
    <div class="inline-box"></div>
  </div>
</div>
<div class="flyover"><div class="inFly centerText">Flyover Div</div></div>
<div class="thecards">Cards DIV
  <div class="flex-parent">
    <div class="inline-card">Image Here</div>
    <div class="inline-card">Image Here</div>
    <div class="inline-card">Image Here</div>
    <div class="inline-card">Image Here</div>
  </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

Ways to extract JSON data from multiple JSON arrays

Within the snippet below, I am attempting to extract the value of women. Right now, I can successfully retrieve 1. Personal care appliances and 2. Jewelry. However, if I try to check any checkbox after that, I encounter an error stating "Uncaught TypeError ...

javascriptjqueryhtmljsonecmascript-6

Performing functions in a sequence with JQuery

I've encountered an issue with executing functions in sequence. In my HTML file, I have the following code: <body onload="start();"> <div id="title"><div id="welcome">WELCOME</div></div> Within my JS code, I have a ...

javascriptjqueryhtml

Is it possible to repeatedly activate a function using onmousedown just like with onkeydown?

My goal is to have the onmousedown event trigger repeatedly when the left mouse button is held down, instead of just once upon clicking. Currently, it only fires a single time. wHandle.onmousedown = function (event) { console.log('mouse b ...

javascriptjqueryhtml

unable to choose the radio option

Encountering an unusual problem with the radio buttons due to custom styling. The issue arises when trying to select certain options. Here is the jsfiddle link for reference: http://jsfiddle.net/bm6Lfhdz/1/ Attempt to choose 'Yes' from the secon ...

javascripthtmlcssradio-button

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

javascripthtmlangularjs

The container is not showing the JSTree as expected

My current project in JavaScript involves integrating a JSTree structure, but I'm encountering an issue where the tree is not showing up or rendering within its specified parent container. Below is the snippet of code I have been using to attempt to d ...

javascripthtmljstree

Troubleshooting registration issues with PHP form (certain variables not functioning)

My PHP code for the registration form seems to be encountering issues with some variables, even though everything appears correct. The username, password, and email fields are functioning properly. I have another page in which data is added to the databas ...

phphtml

Guide on using Python to save a legitimate HTML page of a YouTube video

When I use requests.get(URL, allow_redirects=True) on websites like Youtube or Reddit, instead of seeing the usual HTML text content that appears when I view the page in a browser, I get a bunch of unexecuted JavaScript. All I really need is the title of ...

pythonhtmlhttpweb-scrapingyoutube

Implement the Vue.js @click directive in a location outside of an HTML element

I've set up a link like this: <a href="#" @click="modal=true">Open modal</a> Here's the data setup: export default { data () { return { modal: false } } } Is there a way to trigger the cli ...

javascriptjqueryhtmlvue.jsvuejs2

The flex-basis property seems to be malfunctioning as the image suddenly vanishes when

While my question may seem similar to others, the issue at hand is actually quite different. Here's how it appears in Chrome https://i.sstatic.net/tngvr.jpg Safari https://i.sstatic.net/eE74k.png In Safari, you'll notice that the map disappear ...

htmlcsssafariflexbox

What are some methods to implement overflow:hidden for stacked images inside a div?

I currently have two images stacked on top of each other within a div element as shown below: <div class="container"> <img src="somepic.jpg" class="layer" /> <img src="otherpic.jpg" class="layer" /> </div> Styling is set u ...

javascripthtmlcssresizeoverflow

Images in the JavaScript menu are not remaining fixed in place

Can someone help me with my website? I'm having trouble with the menu for different pages, it should stay gray for the active page. It was working fine before I switched to Wordpress, but now I'm not sure what the issue is. Could someone take a ...

javascripthtmlcsswordpress

What is the best way to create a seamless transition for background-image animations

I have a div where I am applying a class that alters the background image: $('div').addClass('specialBackground'); However, the transition between the background images is too abrupt. I want to achieve a smooth fade effect between the ...

jquerycssbackground-image

Troubleshooting jQuery masonry problem related to initial display and height settings

Within a div, there is a masonry container with the inline style property display:none. With several divs on the page, clicking their respective buttons during load causes them to switch like a slideshow. This disrupts masonry's ability to calculate t ...

javascriptcssheightjquery-masonry

Adjust the width of the div according to the space available from its neighboring div

Is there a way in Bootstrap to have two divs on the same row, where if one is removed, the remaining div takes up the full width? <div class="row"> <div class="col-sm-6" style="background-color:lavender;">Div1</div> <div class ...

javascripthtmlcss

The div is leaving the responsive bootstrap gallery

I'm experiencing an issue with my gallery overflowing the parent div and not staying sorted in all screen sizes. Here's a screenshot along with a snippet of the code: https://i.sstatic.net/mKRtZ.jpg <div id="gallery" class="container-fluid" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Developing a Form Submission Feature Using JQuery Mobile

I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...

javascripthtmljquery-mobile

Tips for Preventing Navigation Bar from Triggering Scrolling

I am experiencing an issue with my navbar and body container. Whenever the navbar is present, the page automatically scrolls vertically. However, when I remove the navbar, the scrolling behavior stops. What is causing this scroll behavior with the navbar? ...

htmlcssbootstrap-4

My React application running on localhost is struggling to connect with the IPFS node

I'm currently working on a React component that allows users to submit a .jpeg file and upload it to IPFS. I've successfully started the daemon and can view the IPFS node in the IPFS-go-companion add-on with the following configurations: Gateway ...

htmlreactjsnpmipfs