What is the best way to align two absolutely positioned divs next to each other on a mobile device?

Question

What is the best way to align two absolutely positioned divs next to each other on a mobile device?

Is there a way to position two absolute div's next to each other on mobile devices without any gap between them?

I am looking for a flexible solution that will allow the divs to stay side by side even as the size of the mobile device changes.

Thank you in advance for your help!

#header {
  position: relative;
}

#menu {
  background-color: green;
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
background-color:pink;
  position: absolute;
  overflow: auto;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 10;
  padding: 1.2rem;
  width: 70%;
  display: block;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

javascript html css sass

Answer 1

Answer №1

Getting close! All you needed to do was utilize percentages and calculate the values for the opposite side.

Snippet: https://jsfiddle.net/bnx6ozh4/

<div class="header">
    <div id="menu">menu</div>
    <div id="search"></div>
    <div id="tab">tab</div>
</div>

And here's the CSS portion:

#header {
  position: relative;
}

#menu {
  position: absolute;
  bottom: 0;
  top: 0;
  width: 20%;
  right: 80%;
  background: green;
}

#tab {
  position: absolute;
  overflow: auto;
  right: 0;
  z-index: 10;
  padding: 1.2rem;
  left: 20%;
  background: red;
}

Answer 2

Getting close! All you needed to do was utilize percentages and calculate the values for the opposite side.

Snippet: https://jsfiddle.net/bnx6ozh4/

<div class="header">
    <div id="menu">menu</div>
    <div id="search"></div>
    <div id="tab">tab</div>
</div>

And here's the CSS portion:

#header {
  position: relative;
}

#menu {
  position: absolute;
  bottom: 0;
  top: 0;
  width: 20%;
  right: 80%;
  background: green;
}

#tab {
  position: absolute;
  overflow: auto;
  right: 0;
  z-index: 10;
  padding: 1.2rem;
  left: 20%;
  background: red;
}

Answer 3

Answer №2

#header {
  position: relative;
}
*{
  box-sizing:border-box;
}

#menu {
  position: absolute;
  right: auto;
  width:50vw;
  height:100vh;
  background:red;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
  position: absolute;
  overflow: auto;
  top:0;
  left:50vw;
  z-index: 10;
  padding:1.2rem;
  width: 50vw;
    height:100vh;
  background:yellow;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="tab">tab</div>
</div>

By including box-sizing:border-box, the issue is resolved!

Answer 4

#header {
  position: relative;
}
*{
  box-sizing:border-box;
}

#menu {
  position: absolute;
  right: auto;
  width:50vw;
  height:100vh;
  background:red;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
  position: absolute;
  overflow: auto;
  top:0;
  left:50vw;
  z-index: 10;
  padding:1.2rem;
  width: 50vw;
    height:100vh;
  background:yellow;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="tab">tab</div>
</div>

By including box-sizing:border-box, the issue is resolved!

Answer 5

Answer №3

After aligning everything perfectly, I decided to add a background color and adjust the top CSS properties for better visibility. To ensure clarity, I also removed the padding.

#header {
  position: relative;
}

#menu {
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
  width: 50vw;
  height: 100vh;
  background-color: skyblue;
}

#tab {
  position: absolute;
  top: 0;
  left:50vw;
  z-index: 10;
  /*padding: 1.2rem;*/
  width: 50vw;
  height: 100vh;
  background-color: teal;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

Answer 6

After aligning everything perfectly, I decided to add a background color and adjust the top CSS properties for better visibility. To ensure clarity, I also removed the padding.

#header {
  position: relative;
}

#menu {
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
  width: 50vw;
  height: 100vh;
  background-color: skyblue;
}

#tab {
  position: absolute;
  top: 0;
  left:50vw;
  z-index: 10;
  /*padding: 1.2rem;*/
  width: 50vw;
  height: 100vh;
  background-color: teal;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

Answer 7

Answer №4

To adjust the positioning of an element, it's best to remove any padding and set its top property. Keep in mind that having a fixed width could impact your overall layout.

#header {
  position: relative;
}

.item {
  position: absolute;
  bottom: 0;
  top: 0;
}

#menu {
  right: auto;
  left: 0;
}

#tab {
  overflow: auto;
  right: 0;
  width: 70%;
}

<div class="header">
  <div id="menu" class="item">menu</div>
  <div id="search"></div>
  <div id="tab" class="item">tab</div>
</div>

Answer 8

To adjust the positioning of an element, it's best to remove any padding and set its top property. Keep in mind that having a fixed width could impact your overall layout.

#header {
  position: relative;
}

.item {
  position: absolute;
  bottom: 0;
  top: 0;
}

#menu {
  right: auto;
  left: 0;
}

#tab {
  overflow: auto;
  right: 0;
  width: 70%;
}

<div class="header">
  <div id="menu" class="item">menu</div>
  <div id="search"></div>
  <div id="tab" class="item">tab</div>
</div>

Answer 9

Answer №5

Simply take out the padding that was set in the id tab, and include top : 0.

#header {
  position: relative;
}

#menu {
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
  position: absolute;
  overflow: auto;
  right: 0;
  z-index: 10;
  /*padding: 1.2rem;*/
  width: 70%;
  top: 0;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

Answer 10

Simply take out the padding that was set in the id tab, and include top : 0.

#header {
  position: relative;
}

#menu {
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
  position: absolute;
  overflow: auto;
  right: 0;
  z-index: 10;
  /*padding: 1.2rem;*/
  width: 70%;
  top: 0;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

Answer 11

Answer №6

To achieve the desired result, simply delete the padding and include top 0 for the tab class. Once you make these changes, your task is complete.

#header {
  position: relative;
}

#menu {
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
    position: absolute;
    overflow: auto;   
    right: 0;  
    top: 0;      
    z-index: 10;
    width: 70%                
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

Alternatively, view the fiddle here: https://jsfiddle.net/6qea1os3/

Answer 12

To achieve the desired result, simply delete the padding and include top 0 for the tab class. Once you make these changes, your task is complete.

#header {
  position: relative;
}

#menu {
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
    position: absolute;
    overflow: auto;   
    right: 0;  
    top: 0;      
    z-index: 10;
    width: 70%                
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

Alternatively, view the fiddle here: https://jsfiddle.net/6qea1os3/

What is the best way to align two absolutely positioned divs next to each other on a mobile device?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Obtain the response body in Nest JS middleware

Sending data from Node.js to PHP using POST method

What is the best way to add a button over an image using Tailwind CSS in Next.js?

Following a POST request, the redirection functionality in Next.js seems to be malfunctioning

What is the best way to eliminate unexplained spacing at the bottom of a webpage using CSS?

Arrange text and a button side by side in a table cell using an Angular directive and an HTML template

What is the best way to align an element based on the position of another element?

What is the method for utilizing keycodes inside an array to determine which keys are recognized as input in a 'keyup' event listener?

How to use jQuery to retrieve the smallest and largest dates from an object with key-value pairs

Having trouble converting a JSON array into a JavaScript array upon creation

Issue with Firebase V9 addDoc: No indication of success or failure, and data is not being written to the

How can I display two slides at once in Ionic 2/3 on a wide screen?

Deleting a row from a table when a similar element is found in another location

"Upon requesting three gltf files, the response was found to

Encountering a Sass Dart error "Bad state: Can't access parent outside of a module" while running npm start in a Create React App

What is causing the discrepancy in functionality between these two HTML/CSS files with identical code?

Rebuild object methods obtained from localStorage

Bring in a php array to populate a dataset in JavaScript

Utilize the power of React Context API to manage state within Child Components directly, eliminating the need to pass down functions

Automatically navigate to a random link on a webpage with the Selenium Python API