Position 2 absolute DIV inside 1 relative DIV within bootstrap container - html

Question

I am trying to position 2 divs within 1 div inside a bootstrap container... One located top left and one located top right.
I can get the one top left to sit where I want it to, but the bottom right one, when putting right: 20px sits to the right of the browser itself, and not within the container.
Here is my HTML & CSS:
<div id="header">
<div class="container">
<div class="div1">
Top left content
</div>
<div class="div2">
Bottom right content
</div>
</div>
</div>
#header {
height: 625px;
position: relative;
}
#header .div1 {
position: absolute;
top: 20px;
}
#header .div2 {
position: absolute;
bottom: 20px;
right: 20px;
}
Any suggestions on how to get the bottom right div to sit to the right of the container and not the browser, would be greatly appreciated.
Thanks

Answer 1

Your absolute divs are placed inside the #header element since you applied position:relative on it.
Bootstrap doesn't have explicitly set relative position for container class. You need to set position for container and then your absolute divs will be placed inside the container:
.container{
position: relative;
}
So, it would be good to replace the following:
#header {
height: 625px;
position: relative;
}
With this:
#header .container{
height: 625px;
position: relative;
}

Answer 2

<style>
#header {
height: 625px;
position: relative;
}
#header .div1 {
float: left;
top: 20;
}
#header .div2 {
position: absolute;
bottom: 20;
right: 0;
}
</style>
<div id="header">
<div class="container">
<div class="div1">
Top left content
</div>
<div class="div2">
Bottom right content
</div>
</div>
</div>