how position a div ...px from another div - html

Question

I was having problems with positioning my language option at the top of my blog. It was always on a different position on a Windows and a Mac. So I thought about making an inner and outer div. But I'm having troubles with the position of my inner div.
This is the result I want:
This is what I have now
This is the code I have in my CSS on wordpress:
EDITED
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 160px;
top: -336px;
background: transparent;
width: 150px;
z-index: 10001;
}
The block with the border just has <div class="outer"...
And the inner div, the dropdown, is a widget that I'm trying to position at the top of the page, I gave the widget "inner" class.
QUESTION --> If I put marging-right: 4px, it starts counting from the right of the screen, how do I position (for example 4px) from the right of the Outer div?
So that it starts counting from the dotted border on the right (or the left, doesn't matter)
(I'm a beginner in HTML so if you know how to help me, could you please tell me what code I need, and where?

Answer 1

You should use % to refer to positions on the screen. But your problem can be fix using position: relative to refer to the poition inside the parent object, and moving it with top and left
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 159px;
top: -17px;
background: transparent;
width: 100px;
}
<div class="outer">
OUTER
<div class="inner"><select><option>INNER</option></select></div>
</div>

Answer 2

To answer your question "how do I position (for example 4px) from the right of the Outer div?" you would do that by first determining how the elements relate to each other. This is determined by the position and display CSS properties. Depending on which position and display values your two elements have, the answer will vary.
The HTML markup you provide for your "outer" element shows that it is a div. Your CSS does not define a position for this element, so the browser default is static, i.e. position:static.
Your "inner" element is a mystery to us. If it is another div then it is another static position which we can help with. If it is a ul then it is an inline element, which will require a different answer.
Your markup is important here.
EDIT
First thing, your 'outer' div is not actually containing your inner div. This is the outer div markup:
<div class="hide_on_mobile outer">Choose language</div>
You'll see it doesn't contain the element in question that we want to position. Therefore, like my first sentence states, we need to understand how our element in question relates to those around it.
In your situation, you are not in a good spot because the element you want to position is contained by elements that don't relate to your target element. Therefore the only way to position them in the same spot on all screen sizes is to position them absolutely and use percentages.
Or the easy way, if you want to stick to one screen width:
.inner {
position: relative; //override by .widget_polylang element
left: 27px;
top: -17px; //override by .widget_polylang element
background: transparent;
width: 100px; //override by .widget_polylang element
}
You'll see some of your key/value parameters are being outclassed by the .widget_polylang element. The only way to change those is to edit the styles of .widget_polylang or add increased CSS specificity to .inner.