What is the trick to getting boxes to overlap the div element?

I'm currently designing a webpage with 3 columns in a div row, and I want them to overlay the div element. How can I achieve this effect?

I have experimented with flexbox, z-index positioning, etc., but so far, I haven't been successful. Here is the desired layout:

And here is how it currently appears:

Below is the code snippet that I have been working with:

.column1 {
  float: left;
  width: 33.33%;
  text-align: center;
  background-color: #e5e4e2;
  padding-top: 100px;
  padding-bottom: 100px;
  width: 300px;
  margin-left: 130px;
  margin-right: 160px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 10%;
  box-shadow: 0 4px 2px -2px #5E5E5E;
}

.column2 {
  float: left;
  width: 33.33%;
  text-align: center;
  background-color: #a9a9a9;
  padding-top: 100px;
  padding-bottom: 100px;
  width: 300px;
  margin-left: 0px;
  margin-right: 160px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 10%;
  box-shadow: 0 4px 2px -2px #5E5E5E;
}

.column3 {
  float: left;
  width: 33.33%;
  text-align: center;
  background-color: #000000;
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
  width: 300px;
  margin-left: 0px;
  margin-right: 130px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 10%;
  box-shadow: 0 4px 2px -2px #5E5E5E;
}
<div style="float:left;width:100%;background-color: #c5c5c5;margin-top:100px;padding-top:100px;">
  <h3 style="text-align: center;font-size:30pt">Are thinking all the time about...</h3>
  <h3 style="text-align: center;padding-bottom: 100px;font-size:30pt">(how to solve main problem), then these 3 ideas for you</h3>

  <div class="row">
    <div class="column1"><img style="padding-bottom:20px" src="images/circle.png">
      <h3 style="padding-bottom:20px;font-size:16pt">Method 1</h3>
      <p style="font-size: 14pt;">Visual icon above and subtext comes here</p>
    </div>
    <div class="column2"><img style="padding-bottom:20px" src="images/circle.png">
      <h3 style="padding-bottom:20px;font-size:16pt">Method 2</h3>
      <p style="font-size: 14pt;">Visual icon above and subtext comes here</p>
    </div> 
    <div class="column3"><img style="padding-bottom:20px" src="images/circle.png">
      <h3 style="padding-bottom:20px;font-size:16pt">Method 3</h3>
      <p style="font-size: 14pt;">Visual icon above and subtext comes here</p>
    </div>
  </div>

</div>

htmlcss

Answer №1

UPDATE: To achieve the desired result, adjusting the height of the container should suffice. For a live demonstration, check out this link - https://codepen.io/tomdringer/pen/XWgWxKr

Instead of setting a specific height for the grey background and using overflow: visible, it's recommended to streamline your CSS code like this:

.column {
  float: left;
  width: 33.33%;
  text-align: center;
  padding: 100px 20px;
  width: 300px;
  margin-left: 130px;
  margin-right: 160px;
  border-radius: 10%;
  box-shadow: 0 4px 2px -2px #5E5E5E;
}

.column1{
  background-color: #e5e4e2;
}

.column2{
  background-color: #a9a9a9;
}

.column3{
  background-color: #000000;
}

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

Customize Color of Bootstrap Tooltips

Is there a way to customize the appearance of BootStrap tooltips by changing the color and aligning the text to the left? I've tried various CSS modifications from different posts, but none seem to work. Any idea on how to alter the CSS of the tooltip ...

htmlcssbootstrap-4

Using JavaScript to interact with elements inside an iframe on a webpage

In a simple scenario, I am experiencing incorrect results. Code snippet from MyFrame.HTML: <!DOCTYPE html> <html> <head> <title>My Frame</title> </head> <body> <a href="https://www.google.com& ...

javascripthtmliframe

Align the label vertically with the corresponding input field

I am currently in the process of revamping an old HTML form to eliminate the use of tables. I found a solution on this site to give the label a fixed width, and here is how it looks in the current code: HTML <div id="form"> <label for="field ...

htmlcssvertical-alignment

Syntax error detected: Unexpected T_ELSEIF statement

I have been attempting some basic coding on codeacademy and struggling with an issue for the past hour. What could be causing this error to display: "Parse error: syntax error, unexpected T_ELSEIF on line 12 " <html> <head> <title&g ...

phphtml

Attention! Are you aware of the potential consequences of the impending phase-out of the name attribute in W3C validation? Have you considered how this development

Any thoughts on what could replace the name attribute? According to the W3C validator... Validation Output: 4 Warnings Here is a list of the warning message(s) generated while checking your document. Warning Line 12, Column 21: The name attribute i ...

phphtmlattributesw3cw3c-validation

What is the best way to incorporate new elements into the DOM in order to allow users to share their comments

Can anyone help me with the code below? I have a text box and a comment section, along with a button to add comments. However, I need assistance with adding the posted comment below the comment section. Below is the code snippet: <div id="comments"&g ...

javascriptjqueryhtmldom

The integration of a side panel with a chrome extension is experiencing issues

I am working on a chrome extension with the following functionalities - Extract URL path from a specific webpage. (The webpage's URL remains constant) Open this URL in a new tab. It can be either http:// or https://. Embed an iframe containing a sim ...

javascripthtmlgoogle-chrome

Fullscreen overlay or pop-up display

I have a website with images and iframes displayed within a fancybox. Everything is functioning properly, but now the website's requirement is to have a fullscreen overlay like on the usatoday website. Take a look at for reference. When clicking on ...

jqueryhtmlcss

HTML Canvas resizing challenge

My goal is to resize the canvas to fit inside its parent div within a Bootstrap grid, but I'm running into an issue where the canvas keeps expanding to 2000px x 2000px. Despite successfully resizing based on console.log outputs showing the same dimens ...

javascripthtmlcssbootstrap-4html5-canvas

Guidelines for incorporating JS in Framework7

I am developing an application using the framework7. I am facing a challenge where I need to execute some javascript in my page-content, but it is not running as expected. <div class="pages"> <div class="page close-panel" data-page="item"> ...

javascripthtmlhtml-framework-7

In React js, I wanted to display the animation specifically on the "add to bag" button for the added item

When I click the "add to bag" button, all other buttons also display the animation. How can I make sure that only the clicked button shows the animation? Any suggestions? <Table responsive> <thead> <tr> ...

javascriptcssreactjsanimation

What is the process for converting HTML assets into a SCORM package?

**css styles fonts images media menu1_images menu2_images menu3_images menu4_images** index.html index_custom.js index_actions.js menu1.html menu1_custom.js menu1_actions.js menu2.html menu2_custom.js menu2_actions.js menu3.html menu3_custom.js menu3_actio ...

jqueryhtmlscorm

Turn off the whole DIV container and its contents once the button is clicked

Here's an example of the HTML markup: <div id="picing-selection" class="disableMe"> <a class="upgradeSub" value="@ViewBag.Id"> Upgrade <i class="fa fa-money"></i> </a> </div> The onclick event is d ...

javascriptjqueryhtmlonclick

Tips for optimizing HTML5 markup elements to render effectively in Internet Explorer

How can I ensure that HTML5 markup elements such as <header>, <section>, and <footer> are displayed properly in Internet Explorer? I've noticed that when I apply CSS to these elements, the styling doesn't always work as expecte ...

csshtmlcss-selectorsmarkup

How can I pass a variable to withStyles in Material UI?

Here is the code I am currently working with: class StyledInput extends React.Component{ styles = (color, theme) => ({ underline: { borderBottom: `2px solid ${color}`, '&:after': { borderBottom: `2px solid ${col ...

cssreactjsmaterial-uiwrapperhigher-order-components

What is the best way to set inner text using jQuery?

The code snippet below demonstrates a specific issue: <span id="test1">some text</span> <span id="test2">some text</span> Upon loading the content, the following JavaScript is executed: alert($('test1').text(); $(' ...

jquerycss

Autofocus Styling with CSS Bootstrap

Currently, I am working on creating a grid of large buttons using React and Bootstrap. I have implemented CSS for hover and focus effects on these buttons. My main issue arises when I try to load the screen with one button already focused. I attempted to ...

cssreactjsbootstrap-4

Pass the ID of the <a> element from one function to another

I am a beginner in javascript/jQuery, so please be patient with me if my question seems too simple for you and too challenging for me. I have a function that I won't post the entire code for because it would make this too lengthy. Another function ...

javascriptjqueryhtmljsonajax

The form submits immediately after jquery is activated

One challenge I'm facing involves multiple forms on a single page being submitted using jQuery. Currently, I have the following code snippet: $("form").submit(function (e) { // Submit form via Ajax }); The problem arises when the form is only s ...

jqueryhtmlajax

Guide to implementing a universal animated background with Angular components

I'm having trouble figuring out why, but every time I attempt to use a specific code (for example: https://codepen.io/plavookac/pen/QMwObb), when applying it to my index.html file (the main one), it ends up displaying on top of my content and makes ev ...

cssangular