Div permanent positioning while resizing browser - html

Question

So what my goal is, is to position this div background box "lightgrey", with the text which is in another div, but everytime i get the divs positioned the way I want, they seem to be offset, I was thinking of creating a #media_query but I felt like I would have to create way too many statements to have it adjust accordingly, if anyone has any suggestions that would be great.
<div style="width:200px; height:200px;right:0;margin-right:7%; border: 5px;
solid:grey; background-color:lightgrey;position:absolute;">
</div>
<div style="position:absolute;right:0;margin-right:10%;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
The first image is of a map leaflet that does what I want to achieve and its essentially dynamically changing the size without losing its position, verses what I created which constantly moves out of position when i resize the screen.
Leaflet Map (my goal):
This first image is ideal with how I would want it positioned:
When I resize this happens:
I don't have a ton of experience with css, I'm in a web development class right now, but I wont be able to see my professor because of the holidays, if anyone could give me some suggestions I would really appreciate it!
Any suggestions?
html code: https://pastebin.com/iTmsyV5Z

Answer 1

I can't really get a full example working to test but something like:
<div style="width: 200px; height:200px; border: 5px;
solid:grey; background-color: lightgrey; float: left;">
</div>
<div style="margin-left:10%; float: left;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
or
<div style="width: 200px; height:200px; border: 5px;
solid:grey; background-color: lightgrey; float: left;">
</div>
<div style="margin-right:10%; float: right;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
Should work after some adjustments of the values. Not sure if you want the grey box all the way to the right or left.
I achieved this by using relative positioning. And floating both elements left so they stack horizontally. I believe this is what you wanted.

Answer 2

By adding the element within your main container, absolute positioning will work nicely. This will then scroll with the container. If you require it to stay where it is on the screen, you will need to use fixed positioning, it will then be relative to your viewport. So keep in mind when adjusting your top and right positioning to compensate.
.Menu,
.Content {
position: fixed;
background-color: #CCC;
left: 10%;
right: 10%;
}
.Menu {
top: 10px;
height: 50px;
}
.Content {
top: 70px;
bottom: 10px;
overflow: auto;
padding-right: 250px;
}
.Floating {
position: absolute;
background-color: #EDEDED;
right: 20px;
top: 20px;
width: 210px;
height: auto:
}
<div class="Menu">
This is the menu
</div>
<div class="Content">
<div class="Floating">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus felis
nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis.
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus
felis nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis. Morbi id quam libero. Donec laoreet ullamcorper lobortis. Etiam quis est ac lacus varius malesuada. Nunc venenatis
rutrum dui, id euismod nunc porttitor id. Nulla id sapien imperdiet, ullamcorper felis et, rhoncus tortor. Quisque purus tellus, molestie a urna in, bibendum bibendum mauris. Nunc aliquet ornare tincidunt. Praesent leo diam, fermentum nec tempor in,
pellentesque eget velit. Aenean luctus mauris et turpis vehicula, at tristique ex gravida. Vivamus finibus, tellus vel volutpat facilisis, enim metus mattis mi, quis dictum tortor mi a mauris. Pellentesque malesuada tellus non consectetur feugiat.
Proin rutrum sem nec odio varius tincidunt. Quisque egestas enim et orci scelerisque, quis viverra lectus tristique. Donec consectetur, lacus sed vehicula lacinia, ipsum arcu consequat odio, sed porta erat neque eu lacus. Proin consequat quam vitae
nisl vulputate, ut imperdiet justo ultricies. Phasellus dictum vestibulum ullamcorper. Quisque lobortis eros sed ante porta ultricies. Suspendisse sit amet purus non enim fringilla pellentesque. Sed posuere, metus ut venenatis pretium, enim urna laoreet
sapien, accumsan condimentum mauris nisi sed elit. Nunc mollis sit amet enim ac placerat. Donec elementum consectetur ipsum in molestie. Fusce auctor sollicitudin lorem a pharetra. Vestibulum blandit consectetur sagittis. Nullam varius commodo dictum.
Sed tempus a nulla nec feugiat. Sed pharetra mattis velit sed sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sit amet vehicula felis. Nullam faucibus interdum rhoncus. Proin eget velit non
nunc dignissim vestibulum sit amet id nulla. Nunc a lectus mauris. Sed sagittis orci ullamcorper nisi ullamcorper dictum. Etiam ut tellus tortor. In a molestie tortor. Quisque turpis tellus, fermentum euismod eros a, vulputate aliquam sapien. Integer
nunc dui, scelerisque nec interdum id, auctor ut ante. Curabitur pharetra dui vitae tellus tincidunt auctor. Etiam eget fringilla massa. Phasellus auctor lorem hendrerit massa porttitor, luctus consequat leo semper. Curabitur sollicitudin est sapien,
sed vulputate neque finibus ac. Aliquam pulvinar enim ac mi congue, eu dapibus velit imperdiet. Suspendisse pretium tellus eu urna auctor, quis sodales erat varius. Aenean eget felis mi. Suspendisse non tellus in mauris congue finibus et et risus.</div>
</div>