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>

htmlcss

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

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/

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

Is the "Wait for Document Loaded" function available for Chrome in Blue Prism?

Currently using BP 6.5 with the new Browser Automation mode, it appears that some features found in the HTML mode are missing. The absence of "Wait for Parent Document Loaded" is particularly notable - only "Check Exists" is available. Is there something ...

htmlblueprism

The CSS background-image fade transition is optimized for Chrome browsers

HTML: <a class="navbar-brand page-scroll" href="#intro"></a> CSS: .navbar-custom .nav li a.navbar-brand { width: 70px; height: 62px; background: url(myimg.png) no-repeat; background-size: 70px 62px; display: block; po ...

htmlcsscross-browsercss-transitions

Creating a div that expands to fill up the remaining height within a flex-child

I'm facing a challenge with a flex container that contains flex children. Within each flex child, there are two stacked divs, the first of which has an unknown height. My goal is to make the second div fill the remaining height available. I've be ...

cssflexbox

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...

htmlcss

What's the best way to implement two AJAX field validations to prevent button redirection on a website?

Can anyone provide guidance on how to implement two ajax field validations for a button to prevent clicking if the data already exists or redirecting to the same page? I am seeking assistance with this issue. Below is the ajax code snippet: function vali ...

javascriptphphtmlajax

eliminate gaps between hyperlinks using cascading style sheets

I developed a webapp for iOS which has a specific page containing a centered div with 3 buttons. Inside this div, there is a total of 460px with each link measuring as follows: the first and last are 153px while the middle one is 154px. The main issue ar ...

htmlcss

When the radio button is selected, show a variety of buttons

I'm facing an issue with rendering different buttons for two radio buttons within a view. Here is the rendered HTML code for the radio buttons: <input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> <inpu ...

javascriptjqueryhtmlasp.net-mvc

The usage of CSS pseudo elements with the position absolute property

To allow for the opacity of an image to be changed without affecting the parent container's opacity, I added the image as a pseudo-element. The position of the pseudo-element is set to absolute and relative to the parent to position it inside the p ...

htmlcsscss-positionpseudo-element

How can I resolve the vertical adjustment issue of Bootstrap 5 input group on mobile devices?

My current issue involves using Bootstrap 5.2.3 to create an input group that displays a set of spans with the ".input-group-text" class alongside inputs with the ".form-control" class. While this setup works well on a computer screen, it does not adjust c ...

javascriptjquerycssbootstrap-5

Show concealed elements above everything else

I've encountered an issue with my custom dropdown list as it displaces other elements when it appears. I want it to overlay on top of everything else, similar to the default select behavior. Despite trying to set position: relative; and z-index:100;, ...

javascriptjqueryhtmlcss

Choose not to alter the display value during keyup and keydown events, while still triggering the change event

$(function(){ $(".cls_user_details select").keyup(function(){ $(".cls_user_details select").val("Profile"); }) }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cls_user_setti ...

javascriptjqueryhtml

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...

htmlcssflexbox

Select the dropdown menu to access the last line of the table

My custom dropdown is causing a scroll to appear at the bottom of the table when it's open, making it hard to view all the elements. I want to find a way to either expand the body of the dropdown or enlarge it so that this doesn't happen. Can any ...

cssreactjsstylesoverflow

Conceal header and footer bar in Jquery Datatable theme

I need assistance in removing the header/footer bar from this table Here is a visual representation of what I am looking to remove: The jQuery code for this table: $(document).ready(function() { var oTable = $('#tableSmooth').dataTable({ ...

javascriptjqueryhtmldatatable

Is there a way to restore a minimized min.css file?

Recently, I attempted to utilize an online tool for unminifying my CSS code. However, when I replaced the minified code with the unminified version and accessed the URL, I discovered that the entire website had lost its layout. Unfortunately, relying sole ...

htmlcssminimizeunminify

div.load() results in a complete page reload

When I save form data, my goal is to load only the specific div without refreshing the entire page. However, despite using the preventDefault() command, the form still seems to be posting the whole page. I have tried adding the following code: $("#btn ...

javascriptjqueryhtmlasp.net-mvc

"Discover the Step-by-Step Guide to Launching Fresh Content or Code in the Current Tab and

I have a webpage with multiple tabs, each representing different content. Now, I want to create a functionality where if a user clicks on the "Home" tab, they are prompted to enter a password (e.g., 1234). Upon entering the correct password, the user shoul ...

javascripthtml

Deleting a li element within an AJAX response function can be accomplished by targeting the specific

I am attempting to remove the li element that is the parent of the clicked a element. Here is the code I am using: function vanish(id_arg){ $.ajax({ url: "/vanish/", type: "POST", data: {id_to_delete: id_arg}, ...

javascriptpythonhtmlajaxdjango

Scroll the div back to the top when the form is submitted

I have set up a form in a pop-up using Bootstrap modal. The form is quite long, so after submission, the message appears at the top of the form. However, I want it to scroll to the top when the user submits the form so they can easily see the message. Is ...

javascriptjqueryhtmlcsstwitter-bootstrap

Update the color of the angular material input text box to stand out

Hey there, I'm currently using Angular Material and I want to change the color of the input focus when clicked. At the moment, it's displaying in purple by default, but I'd like it to be white instead. https://i.stack.imgur.com/vXTEv.png ...

htmlcssangularangular-materialmaterial-ui