Stacking divs one on top of the other

Question

Stacking divs one on top of the other

My goal is to design a simple webpage with two full screen background colored divs. On top of these background divs, I want to add two smaller divs where I can input text and place a button underneath to randomize the words (refer to the attached screenshot for reference).

View Screenshot of Desired Layout

I have created the code for the background divs but for some reason, I am struggling to overlay any elements on top of them...

.container {
  height: 100%;
  padding: 0;
  text-align: center
}

.inner {
  width: 50%;
  height: 100%;
  display: inline-block;
}

.inner.left {
  background-color: brown;
}

.inner.right {
  background-color: grey;
}

<div class="container">
  <div class="inner left"></div>
  <div class="inner right"></div>
</div>

html css

Answer 1

Answer №1

Is this the kind of layout you were anticipating?

body,html{
margin:0;
padding:0;
}
.one{
width:50%;
background-color:brown;
float:left;
margin:auto;
height:100vh;
}
.inner_1{
  margin: 0;
  position: absolute;
  top: 50%;
  right:50%;
  width:200px;
  line-height:60px;
  background-color:yellow;
  text-align:center;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.inner_2{
  margin: 0;
  position: absolute;
  top: 50%;
  background-color:#7be0ff;
  width:200px;
  line-height:60px;
  text-align:center;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.two{
width:50%;
background-color:#bebebe;
float:left;
height:100vh;
}
.button{
 margin: 0;
 position: absolute;
 top:70%;
 background-color: #6afa70; /* Green */
 left: 50%;
 -ms-transform: translate( -50%);
 transform: translate(-50%);
 border:none;
 text-decoration: none;
 }

<div class="one">
<div class="inner_1">Div layer on top 1</div>
</div>
<div class="two">
<div class="inner_2">Div layer on top 2</div>
</div>
<input type="button" class="button" value=" Button">

Answer 2

Is this the kind of layout you were anticipating?

body,html{
margin:0;
padding:0;
}
.one{
width:50%;
background-color:brown;
float:left;
margin:auto;
height:100vh;
}
.inner_1{
  margin: 0;
  position: absolute;
  top: 50%;
  right:50%;
  width:200px;
  line-height:60px;
  background-color:yellow;
  text-align:center;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.inner_2{
  margin: 0;
  position: absolute;
  top: 50%;
  background-color:#7be0ff;
  width:200px;
  line-height:60px;
  text-align:center;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.two{
width:50%;
background-color:#bebebe;
float:left;
height:100vh;
}
.button{
 margin: 0;
 position: absolute;
 top:70%;
 background-color: #6afa70; /* Green */
 left: 50%;
 -ms-transform: translate( -50%);
 transform: translate(-50%);
 border:none;
 text-decoration: none;
 }

<div class="one">
<div class="inner_1">Div layer on top 1</div>
</div>
<div class="two">
<div class="inner_2">Div layer on top 2</div>
</div>
<input type="button" class="button" value=" Button">

Answer 3

Answer №2

When it comes to aligning the content within div elements vertically, one approach is to utilize a combination of table-cell and float. Here's an example of how you can achieve this:

.container{ 
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
 }
.inner{
    width: 50%;
    height: 100%;
    float: left;
}
.inner.left{
    background-color: brown;
}
.inner.right{
    background-color: grey;
}
.inner-sub{
    display: table;
    width: 100%;
    height: 100%;
}
.inner-sub .align{
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
.inner-sub .align .content{
    width: 300px;
    height: 40px;
    background: red;
    float: right;
}
.right .inner-sub .align .content{
    float: left;
}
.button-container button{
    position: absolute;
    right: -28px; /* half of the width of the button */
    height: 20px;
    margin-top: 70px; /* set this depending on how far away you want the button to be from the elements */
}

<div class="container">
    <div class="inner left">
        <div class="inner-sub">
            <div class="align button-container">
                <div class="content">div layed on top 1</div>
                <button>Button</button>
            </div> 
        </div>
    </div>
    <div class="inner right">
        <div class="inner-sub">
            <div class="align">
                <div class="content">div layed on top 2</div>
            </div> 
        </div>
    </div>
</div>

Check out the implementation on JsFiddle: https://jsfiddle.net/nvL6wyoj/2/

Answer 4

When it comes to aligning the content within div elements vertically, one approach is to utilize a combination of table-cell and float. Here's an example of how you can achieve this:

.container{ 
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
 }
.inner{
    width: 50%;
    height: 100%;
    float: left;
}
.inner.left{
    background-color: brown;
}
.inner.right{
    background-color: grey;
}
.inner-sub{
    display: table;
    width: 100%;
    height: 100%;
}
.inner-sub .align{
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
.inner-sub .align .content{
    width: 300px;
    height: 40px;
    background: red;
    float: right;
}
.right .inner-sub .align .content{
    float: left;
}
.button-container button{
    position: absolute;
    right: -28px; /* half of the width of the button */
    height: 20px;
    margin-top: 70px; /* set this depending on how far away you want the button to be from the elements */
}

<div class="container">
    <div class="inner left">
        <div class="inner-sub">
            <div class="align button-container">
                <div class="content">div layed on top 1</div>
                <button>Button</button>
            </div> 
        </div>
    </div>
    <div class="inner right">
        <div class="inner-sub">
            <div class="align">
                <div class="content">div layed on top 2</div>
            </div> 
        </div>
    </div>
</div>

Check out the implementation on JsFiddle: https://jsfiddle.net/nvL6wyoj/2/

Stacking divs one on top of the other

Answer №1

Answer №2

Similar questions

Choose the option in real-time with Jquery

Make sure to include the target blank attribute in your custom PHP code for

Designing a loading animation with rotating lines converging towards the center to form a circular motion

Utilizing Unicode characters within the content of a pseudo element in data-content

What are the steps for encoding a value using jquery serialize?

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

Using CSS Zoom / Transform with the iframe Tag in HTML

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms

After attempting to refresh the webpage with the F5 key, I noticed that the jQuery progress bar was not functioning properly. Additionally, the webpage failed to display any

Changing direction of arrow upon dropdown menu opening with JavaScript

Ensure the webpage is set to have a minimum width of 1024 pixels

Dropdown element with PrimeNG adorned with a span

What is the best way to make a black background div that perfectly aligns with another div?

Tips for making a standout testimonial card?

HTML5 Advanced API Integration with Vimeo

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

Setting the background color in the navbar of a Laravel application

Maximizing Particle Performance Using JavaScript

Guide on storing images in a designated folder using CodeIgniter

Activate single elements one at a time