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>