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):

Screen Shot

This first image is ideal with how I would want it positioned:

Screen Shot

When I resize this happens:

Screen Shot

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

edited Nov 22 '18 at 18:37

asked Nov 22 '18 at 5:33

david 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

<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>

Leaflet Map (my goal):

Screen Shot

This first image is ideal with how I would want it positioned:

Screen Shot

When I resize this happens:

Screen Shot

Any suggestions?

html code: https://pastebin.com/iTmsyV5Z

edited Nov 22 '18 at 18:37

asked Nov 22 '18 at 5:33

david 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

<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>

Leaflet Map (my goal):

Screen Shot

This first image is ideal with how I would want it positioned:

Screen Shot

When I resize this happens:

Screen Shot

Any suggestions?

html code: https://pastebin.com/iTmsyV5Z

edited Nov 22 '18 at 18:37

asked Nov 22 '18 at 5:33

david yeritsyan

11111

<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>

Leaflet Map (my goal):

Screen Shot

This first image is ideal with how I would want it positioned:

Screen Shot

When I resize this happens:

Screen Shot

Any suggestions?

html code: https://pastebin.com/iTmsyV5Z

html css

edited Nov 22 '18 at 18:37

asked Nov 22 '18 at 5:33

david yeritsyan

11111

edited Nov 22 '18 at 18:37

asked Nov 22 '18 at 5:33

david yeritsyan

11111

edited Nov 22 '18 at 18:37

asked Nov 22 '18 at 5:33

david yeritsyan

11111

asked Nov 22 '18 at 5:33

david yeritsyan

11111

asked Nov 22 '18 at 5:33

david 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

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

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 |

2 Answers
2

active

oldest

votes

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>

<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 coakley

7581421

add a comment |

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

Marius

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');
});

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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>

<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 coakley

7581421

add a comment |

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>

<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 coakley

7581421

add a comment |

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>

<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 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>

<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 coakley

7581421

answered Nov 22 '18 at 19:03

Dean coakley

7581421

answered Nov 22 '18 at 19:03

Dean coakley

7581421

answered Nov 22 '18 at 19:03

Dean coakley

7581421

add a comment |

.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

Marius

867

I'll try this solution

– david yeritsyan
Nov 22 '18 at 18:42

add a comment |

.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

Marius

867

I'll try this solution

– david yeritsyan
Nov 22 '18 at 18:42

add a comment |

.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

Marius

867

.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

Marius

867

answered Nov 22 '18 at 18:36

Marius

867

answered Nov 22 '18 at 18:36

Marius

867

answered Nov 22 '18 at 18:36

Marius

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

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk