-1

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>

7
  • its already align use text-align: right to show that and top: 0 May 31, 2019 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 May 31, 2019 at 10:54
  • I have searched @JitendraAhuja I want two absolute div's, not for normal div's May 31, 2019 at 10:55
  • For making it responsive, media query has to be the best solution i suppose May 31, 2019 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 May 31, 2019 at 11:02

6 Answers 6

1

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

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

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>

5
  • Thank you @Nisharg, But you removed one of my div May 31, 2019 at 11:01
  • its empty div so i removed it LOL May 31, 2019 at 11:02
  • In the example, I have given nothing, but there is a search box :) May 31, 2019 at 11:03
  • ok for your happiness i added it ok May 31, 2019 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! May 31, 2019 at 11:05
0

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>

0

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>

0
0

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/

Not the answer you're looking for? Browse other questions tagged or ask your own question.