One div positing on two div

Question

I need to center one div(3.element) on two the other div tag.

#header {
  width: 100%;
  height: 150px;
  background-color: rgb(181, 230, 29);
}
#footer {
  width: 100%;
  height: 150px;
  background-color: rgb(153, 217, 234);
}
#mid {
  width: 150px;
  height: 250px;
  background-color: rgb(200, 191, 231);
  margin-left: auto;
  margin-right: auto;
}

<div id="header"></div>
<div id="mid"></div>
<div id="footer"></div>

And this is what I want...

Refer this http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div — Vinay, Dec 25 '16 at 03:13
@Milan Panin my answer was far better then the one you accepted. Try varying the size of the #mid. make it's width:50px;height:100px;, the answer you accepted will not work — ab29007, Dec 25 '16 at 03:33
Yes you are right, my fault. I'm a beginner, thanks for the advice and help. — Milan Panin, Dec 25 '16 at 03:44

ab29007 · Accepted Answer · 2016-12-25T03:20:56.780

1

Put the #mid inside the header and apply position:absolute; to it and then use transform:translate(-50%,50%); (applies to left and bottom respectively) Here's the code:

#header{
 width: 100%;
 height: 150px;
 background-color: rgb(181,230,29);
  position:relative;
}
#footer{
 width: 100%;
 height: 150px;
 background-color: rgb(153,217,234);
}
#mid{
 width: 150px;
 height: 200px;
  position:absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
 background-color: rgb(200,191,231);
  z-index:100;
}

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <div id="header">
  <div id="mid"></div></div>
   
 <div id="footer"></div>

</body>
</html>

edited Dec 25 '16 at 03:20

answered Dec 25 '16 at 03:14

ab29007

7,611
2
17
43

@Milan my answer was far better then the one you accepted. Try varying the size of the `#mid`. make it's `width:50px;height:100px;`, the answer you accepted will not work. – ab29007 Dec 25 '16 at 03:32
1

your answer was not "far better" at all. it works perfectly. they were practically exactly the same. If they wanted to change the size, all they would have to do is change the negative value to half. – GROVER. Dec 25 '16 at 03:50
well that is the point. user doesn't have to specify the height in my answer. In your answer if there is a paragraph in the `#mid` div then in mobile devices , it will flow out of the div. – ab29007 Dec 25 '16 at 03:57
I just tested it on mobile, and it works perfectly! don't know what you're talking about. – GROVER. Dec 25 '16 at 04:09
Dude, seriously, you are downvoting my other answers. I just pointed out which answer was better. Be a better person and give better answer. – ab29007 Dec 25 '16 at 04:09
I am not accusing you of anything here, but two of my posts (one 5 days older and one 7 days older) got downvoted right now. and If you downvote you also loose 1 point. So I'm asking you to please not downvote posts out of spite. – ab29007 Dec 25 '16 at 04:15
I'm not like that, dude. I'm not going to downvote someones answer out of hate. I'm just saying, there was no point in telling him yours was "far better", when they were practically the same; and would do that same thing. It's not very fair – GROVER. Dec 25 '16 at 04:18
look, man I've been here only 9or maybe 10 days and I didn't know that you can unaccept an answer. I just pointed it out that he'd have to change the css for it as height of the div changes. Now I'm sorry about that and I think we should not think about it any further. – ab29007 Dec 25 '16 at 04:21
I agree. don't worry about it dude. I was just saying, it seemed kind of petty :/ – GROVER. Dec 25 '16 at 04:26

billyzaelani · Answer 2 · 2016-12-25T03:20:21.273

1

#header{
 width: 100%;
 height: 150px;
 background-color: rgb(181,230,29);
}
#footer{
 width: 100%;
 height: 150px;
 background-color: rgb(153,217,234);
}
#mid{
 width: 150px;
 height: 250px;
 background-color: rgb(200,191,231);
 margin-left: auto;
 margin-right: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <div id="header"></div>
   <div id="mid"></div>
 <div id="footer"></div>

</body>
</html>

edited Dec 25 '16 at 03:20

answered Dec 25 '16 at 03:17

billyzaelani

567
1
5
18

sorry, i''m not finished yet, i'm accidentally clicked on submit. here the new one – billyzaelani Dec 25 '16 at 03:22

score 1 · Answer 3 · answered Dec 25 '16 at 03:20

Change your #mid within your CSS to this:

#mid{
    position: relative;
    top: -125px;
    left: calc(50% - 75px); // center it by changing the negative value to half the width
    float: left; // this is what allows it to not "disturb" other elements
    width: 150px;
    height: 250px;
    background-color: rgb(200, 191, 231);
}

https://jsfiddle.net/brgbg33m/2/

One div positing on two div

3 Answers3