How to position two absolute positioned div's side by side in the mobile device,?

Question

I wanna position two absolute div's side by side in the mobile device, but there is a gap between the two divs.

I want to position them side by side if the size of the mobile device changes(flexible)

Thanks In Advance!

#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>

its already align use text-align: right to show that and top: 0 — Nisharg Shah, May 31 '19 at 10:46
As usual, this can have multiple answers and all have their own tricks to do. Choose from what best suits with what you want — Jitendra Ahuja, May 31 '19 at 10:54
I have searched @JitendraAhuja I want two absolute div's, not for normal div's — Keerthi Reddy Yeruva, May 31 '19 at 10:55
For making it responsive, media query has to be the best solution i suppose — Jitendra Ahuja, May 31 '19 at 10:58
I have added the code down in the answers at the very beginning, do review it. I think that should best suits what u want — Jitendra Ahuja, May 31 '19 at 11:02
@JitendraAhuja I don't see any difference between mine and your's code — Keerthi Reddy Yeruva, Jun 12 '19 at 08:56

score 1 · Answer 1 · answered May 31 '19 at 10:46

#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>

adding box-sizing:border-box solve the problem!

score 1 · Accepted Answer · answered May 31 '19 at 10:49

Almost there, you just had to use percentages and calculate it of the opposite side.

Fiddle: https://jsfiddle.net/bnx6ozh4/

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

And for the CSS

#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;
}

Nisharg Shah · Answer 3 · 2019-05-31T11:03:51.997

1

That already aligned, i add just background color and top CSS properties to shows you and I remove padding so you clearly show that.

#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>

edited May 31 '19 at 11:03

answered May 31 '19 at 10:51

Nisharg Shah

12,598
6
51
61

Thank you @Nisharg, But you removed one of my div – Keerthi Reddy Yeruva May 31 '19 at 11:01
its empty div so i removed it LOL – Nisharg Shah May 31 '19 at 11:02
In the example, I have given nothing, but there is a search box :) – Keerthi Reddy Yeruva May 31 '19 at 11:03
ok for your happiness i added it ok – Nisharg Shah May 31 '19 at 11:04
don't forgot to consider up-vote and check this answer as best answer for you by clicking on right arrow, thanks! – Nisharg Shah May 31 '19 at 11:05

score 0 · Answer 4 · answered May 31 '19 at 10:43

Just remove the padding and set its top. Note: a fixed width might mess with your layout depending on what you want to do.

#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>

score 0 · Answer 5 · answered May 31 '19 at 10:44

Just remove the padding assigned in id tab. and add 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>

Jitendra Ahuja · Answer 6 · 2019-05-31T11:14:00.367

All you need to do, is to remove padding and add top 0 for tab class :) and you are done.

#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>

Or See the fiddle : https://jsfiddle.net/6qea1os3/

How to position two absolute positioned div's side by side in the mobile device,?

6 Answers6