Div permanent positioning while resizing browser
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
-1
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
html css
asked Nov 22 '18 at 5:33
david yeritsyandavid yeritsyan
11111
add a comment |
-1
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
html css
asked Nov 22 '18 at 5:33
david yeritsyandavid yeritsyan
11111
1
You should not use absolute positioning. Can you include some html code please? It's hard to help otherwise. But generally you want to float the first element left without absolute position and some width of 50% or less and then position the grey box with a float left and margin or float right depending on markup.
– Dean coakley
Nov 22 '18 at 18:25
sure ill update with code right now
– david yeritsyan
Nov 22 '18 at 18:34
add a comment |
-1
-1
-1
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
html css
asked Nov 22 '18 at 5:33
david yeritsyandavid yeritsyan
11111
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
html css
html css
asked Nov 22 '18 at 5:33
david yeritsyandavid yeritsyan
11111
asked Nov 22 '18 at 5:33
david yeritsyandavid yeritsyan
11111
edited Nov 22 '18 at 18:37
david yeritsyan
asked Nov 22 '18 at 5:33
david yeritsyandavid yeritsyan
11111
asked Nov 22 '18 at 5:33
david yeritsyandavid yeritsyan
11111
asked Nov 22 '18 at 5:33
david yeritsyandavid yeritsyan
11111
11111
1
You should not use absolute positioning. Can you include some html code please? It's hard to help otherwise. But generally you want to float the first element left without absolute position and some width of 50% or less and then position the grey box with a float left and margin or float right depending on markup.
– Dean coakley
Nov 22 '18 at 18:25
sure ill update with code right now
– david yeritsyan
Nov 22 '18 at 18:34
add a comment |
1
You should not use absolute positioning. Can you include some html code please? It's hard to help otherwise. But generally you want to float the first element left without absolute position and some width of 50% or less and then position the grey box with a float left and margin or float right depending on markup.
– Dean coakley
Nov 22 '18 at 18:25
sure ill update with code right now
– david yeritsyan
Nov 22 '18 at 18:34
1
1
You should not use absolute positioning. Can you include some html code please? It's hard to help otherwise. But generally you want to float the first element left without absolute position and some width of 50% or less and then position the grey box with a float left and margin or float right depending on markup.
– Dean coakley
Nov 22 '18 at 18:25
You should not use absolute positioning. Can you include some html code please? It's hard to help otherwise. But generally you want to float the first element left without absolute position and some width of 50% or less and then position the grey box with a float left and margin or float right depending on markup.
– Dean coakley
Nov 22 '18 at 18:25
sure ill update with code right now
– david yeritsyan
Nov 22 '18 at 18:34
sure ill update with code right now
– david yeritsyan
Nov 22 '18 at 18:34
add a comment |
2 Answers
2
active
oldest
votes
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.
answered Nov 22 '18 at 19:03
Dean coakleyDean coakley
7581421
add a comment |
1
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>answered Nov 22 '18 at 18:36
MariusMarius
867
I'll try this solution
– david yeritsyan
Nov 22 '18 at 18:42
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424443%2fdiv-permanent-positioning-while-resizing-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 22 '18 at 19:03
Dean coakleyDean coakley
7581421
add a comment |
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.
answered Nov 22 '18 at 19:03
Dean coakleyDean coakley
7581421
add a comment |
1
1
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.
answered Nov 22 '18 at 19:03
Dean coakleyDean coakley
7581421
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.
<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><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><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><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>answered Nov 22 '18 at 19:03
Dean coakleyDean coakley
7581421
answered Nov 22 '18 at 19:03
Dean coakleyDean coakley
7581421
answered Nov 22 '18 at 19:03
Dean coakleyDean coakley
7581421
answered Nov 22 '18 at 19:03
Dean coakleyDean coakley
7581421
7581421
add a comment |
add a comment |
1
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>answered Nov 22 '18 at 18:36
MariusMarius
867
I'll try this solution
– david yeritsyan
Nov 22 '18 at 18:42
add a comment |
1
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>answered Nov 22 '18 at 18:36
MariusMarius
867
I'll try this solution
– david yeritsyan
Nov 22 '18 at 18:42
add a comment |
1
1
1
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>answered Nov 22 '18 at 18:36
MariusMarius
867
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>.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>.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>answered Nov 22 '18 at 18:36
MariusMarius
867
answered Nov 22 '18 at 18:36
MariusMarius
867
answered Nov 22 '18 at 18:36
MariusMarius
867
answered Nov 22 '18 at 18:36
MariusMarius
867
867
I'll try this solution
– david yeritsyan
Nov 22 '18 at 18:42
add a comment |
I'll try this solution
– david yeritsyan
Nov 22 '18 at 18:42
I'll try this solution
– david yeritsyan
Nov 22 '18 at 18:42
I'll try this solution
– david yeritsyan
Nov 22 '18 at 18:42
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424443%2fdiv-permanent-positioning-while-resizing-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You should not use absolute positioning. Can you include some html code please? It's hard to help otherwise. But generally you want to float the first element left without absolute position and some width of 50% or less and then position the grey box with a float left and margin or float right depending on markup.
– Dean coakley
Nov 22 '18 at 18:25
sure ill update with code right now
– david yeritsyan
Nov 22 '18 at 18:34