Overlay one div on top of another div

Hey there, I've been working on creating something similar to this:

Example

However, I'm facing an issue where adjusting the top margin of "3" also affects "2" in the same way. I nested "3" within "2" to align the bottoms.

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
}

.div3 {
  margin: -50px auto 0px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
}

h1,p {
  padding: 0px;
  margin: 0px;
}
<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

htmlcssoverlay

Answer №1

One solution to the issue of collapsing margins is to approach it from a different angle. By positioning the element relative and applying a negative margin-bottom, you can realign the bottom end of the outer div.

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
}

.div3 {
  position: relative;
  top: -50px;
  margin: 0 auto -50px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
}

h1,p {
  padding: 0px;
  margin: 0px;
}
<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text...
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

Answer №2

It seems like you're looking to position div3 absolutely in relation to div2 (which should be set as relative). This way, you can manipulate div3 independently without affecting the position of div2.

Perhaps a structure like this would work:

<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <h1>
  Hello
  </h1>
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text...
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

Additionally, ensure your CSS is set up as follows:

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  position: relative;
  background-color: #e8e8e8;
  height: 200px;
  text-align: center;
}

.div3 {
  position: absolute;
  margin: -50px auto 0px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

h1,p {
  padding: 0px;
 margin: 0px;
}

For further reference, visit the following fiddle link: https://jsfiddle.net/rdbjrqL3/

Answer №3

Remember to include position: absolute in the .div2 and use position:relative for the .div3

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
  position: absolute;
}

.div3 {
  margin: -50px auto 0px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
  position: relative;
}

h1,p {
  padding: 0px;
  margin: 0px;
}
<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</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

Struggling to extract information from the front-end by utilizing Node.js/Express with body-parser and encountering difficulties

Attempting to transfer data from the frontend to a node server utilizing body-parser Shown below is the frontend code: <body> <h1>Donate!</h1> <h2>Select A tier</h2> <label for="donate-tier-select">Suggested Sp ...

htmlnode.jsformsexpressbody-parser

Tips for aligning an image in the center of a div

I'm facing a challenge that seems simple, but I just can't seem to crack it. Here's the HTML snippet in question: <div class="product"> <img src="product123.png" /> </div>` Accompanied by the following CSS: .product { ...

htmlcssmargin

How can I prevent the jQuery animation from moving elements by adjusting the border?

I've been working on a small jQuery script that animates the border of images when hovered over. However, I've run into an issue with unwanted repositioning of adjacent images due to the border width increase. $(document).ready(function(e) { ...

javascriptjqueryhtmlcss

Avoid activating the hover state

Is there a way to prevent a button, div, or li from hovering if it already has an active status using CSS? #list-of-tests .item-test:hover:not(.active) { background-color: #4d5f75; border: solid 1px #4d5f75; } #list-of-tests .item-test:active { ...

javascriptjqueryhtmlcsshover

What could be causing my inline-block divs to not line up correctly?

Presented below is the code snippet of my HTML: .classWrap { text-align: center; } .classInd { display: inline-block; height: 200px; width: 200px; margin: 20px; border: 2px solid #FFF202; border-radius: 10%; box-shadow: 0 0 15px 0 #FFF2 ...

htmlcss

Dynamic Loading of Hovercards using jQuery AJAX

I've been working on integrating jQuery hovercard into our web application, specifically to display HTML content retrieved from an AJAX page when a user hovers over a username link with the data attribute data-toggle="user". Here's what our code ...

jqueryhtmlajax

Using Vue.js 3 composition, I have encountered an issue where the v-if directive is not functioning as expected on two separate div

Is there a way to seamlessly toggle sections of the app in Vue.js 3 composition using v-if? I managed to make it work with the vue.js 2 API option initially, but since transitioning to vue.js 3 API Composition, the section isn't hiding despite screenM ...

javascripthtmlvue.jscomposition

Can the labelDisplayedRows be disabled in the table pagination actions of Material UI?

I am currently working on customizing the table pagination actions in Material UI's table and I need to remove the labelDisplayedRows function. My goal is to only show next/previous icons in the footer without the counter (e.g., 1 of 5). I managed t ...

cssmaterial-uimaterial-table

IMAGE CARDS WITH BOOTSTRAP 5

I created a bootstrap card with an image on the right side, but it doesn't fill the entire space. Below is the image of my bootstrap card: https://i.sstatic.net/k7xuT.png This is the code for my card: {% for book in thesis_details %} ...

cssbootstrap-5

Make sure to specify the max width of the Bootstrap container class to 940 pixels

Currently, I am utilizing Bootstrap 4 with the default container width on my desktop screen. For the main content section of my application, I would like it to be contained within a maximum width of 940px on larger screens. Should I override the existing ...

csstwitter-bootstrapbootstrap-4

Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. https://i.sstatic.net/YN6EO.png These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code- ...

cssangularangular-materialmaterial-design

Ways to extract the source code of a webpage that has been modified on load

While working on extracting data from a website (completely within legal boundaries), I encountered an interesting situation. This particular site has 5 questions with answers on each page. However, upon inspecting the source code by pressing Ctrl+U, I no ...

javascripthtmlweb-scraping

:host background color may be missing, but the font size has been boosted?

Check out this demo where the CSS is applied to the :host element or <hello>. The font size increases but the background color remains unchanged. What do you think? styles: [` :host { font-size: 2rem; background-color: yellow; }`] }) ...

javascriptcssangulartypescript

Tips for showcasing HTML code retrieved from a fetch request in a Vue component

Trying to integrate HTML code received from an API into my VueJS code. The API provides the following: <p>blah blah blah</p> <ul> <li> 1 </li> <li> 2 </li> </ul> Saving this code snippet into a variable, but ...

htmlapivue.jsvuejs2

Tips for choosing an item within a div -> ul -> li using Selenium

I need help with a menu that displays a list on mouse hover, and I'm trying to click on "Logout". However, the code I've written so far is not giving me the desired result. This is the Java code I have: public void logout() throws Exception { ...

javahtmlcsseclipseselenium

Adjusting canvas dimensions for angular chart.js: A quick guide

I am currently creating my first sample code using angular chart.js, but I am facing an issue with changing the custom height and width of my canvas. How can I adjust the height and width accordingly? CODE: CSS #myChart{ width:500px; he ...

javascripthtmlcssangularjscanvas

Designing a div with a proportional size amidst elements of fixed dimensions

I need help figuring out how to create a dynamically sized div based on the browser's height. I'm not sure where to start or how to approach this problem. The layout I have in mind includes a 50px high header, followed by the dynamic div and the ...

csshtml

HTML/CSS border tiling (left, bottom, right)

Is there a way to implement borders using images in CSS/HTML that does not involve CSS3? I am working with three border tiles: left, right, and bottom. I want them to repeat-x/y to the left, right, and bottom of my content container. I attempted to use d ...

htmlcssimagebordertiles

Styling with Radial Gradients in CSS

Struggling to create a banner with a radial gradient background? I'm almost there, but my code isn't matching the design. Any assistance would be greatly appreciated as I can't seem to get the right colors and only part of the first circle i ...

cssvue.jsgradientbannerradial-gradients

Struggling to make the background color of the "col" element in Bootstrap span the full area without creating a scrollbar

I am in the process of designing a webpage layout using Bootstrap 3.3.7 On the left, I have a scrollable sidebar, and on the right, there is a simple element like an image. My goal is to have a background image and color on the right side that covers the ...

htmlcsstwitter-bootstraptwitter-bootstrap-3