position div in bootstrap - css

Question

Wondering why it is so difficult to position divs to remain responsive.. they just float where ever they want for some reason.. how can I position these perfectly? Holding their positions while resizing like my social icons http://www.closetvip.com/splash.html
/* Menu Buttons */
#english {
float:right;
position:absolute;
right:570px;
bottom:101px;
clear:right;
}
#spanish {
position:absolute;
left:570px;
bottom:100px;
clear:right;
}
<div id="spanish">
<img src="img/espanol.png">
</div>
<div id="english">
<img src="img/english.png">
</div>

Answer 1

You need to use position: relative; on the parent div of absolute div's otherwise the items are absolute of the window

Answer 2

you have to control this by media queries or use % in your css rule
like
#spanish {
position:absolute;
left:47%;
bottom:20%;
clear:right;
}
Note: this is not final just an example
These are some standard media queries from chris coyier
reference url
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
use these and set position of your elements for all devices

Answer 3

I don't see the use of bootstrap what so ever, only that it's inclued to the header and that is it...
You are position your element with fixed pixels on right/left and that is taken from the window border, so when you resize your window it's normal that the elements are pushed.
Your social icons are positioned with right 0 so it's normal to stay always at the right when you resize your window, but the 2 other buttons have 570px and they will always keep that space, so when you resize you know what is happening.
The Solution you ask?
You can position them with:
#spanish { bottom: 100px; clear: right; left: 50%; margin-left: -150px; position: absolute;}
#english { bottom: 101px; clear: right; float: right; left: 50%; margin-left: 50px; position: absolute;}