Positioning a banner on the right side of a site - html

Question

I don't know how to position an image with CSS on the right side of the website. I need absolute values from the center of the page and from the top. I can't use absolute value from left or right, because I want the banner to be always next to the right side of the main content (also when the browser is resized). The main content is in the center of the page. Since the image sizes can change, it should always be at the same distance from the page content.
How to do that?
Thanks,
Ivan
EDIT: This is a dummy sketch how I imagined it.

Answer 1

#content {
background-color: blue;
width: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#banner {
background-color: red;
width: 150px;
position: absolute;
left: calc(75% + 15px);
}
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Vel elit scelerisque mauris pellentesque. Diam phasellus vestibulum
lorem sed risus ultricies tristique nulla. Facilisis magna etiam tempor orci. Convallis a cras semper auctor neque vitae tempus. Lorem sed risus ultricies tristique. Gravida cum sociis natoque penatibus. A cras semper auctor neque vitae tempus quam
pellentesque. Morbi tristique senectus et netus et. Platea dictumst quisque sagittis purus sit amet. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. Mauris nunc congue nisi vitae suscipit tellus mauris. Sed nisi lacus sed viverra tellus.
Eget mi proin sed libero enim sed faucibus. Gravida quis blandit turpis cursus in. Purus non enim praesent elementum facilisis. Odio aenean sed adipiscing diam donec. Id eu nisl nunc mi ipsum. Tellus mauris a diam maecenas sed enim. Nibh praesent tristique
magna sit. Sapien nec sagittis aliquam malesuada bibendum. Commodo elit at imperdiet dui accumsan sit amet nulla. Augue neque gravida in fermentum et. Augue eget arcu dictum varius duis at. Diam vel quam elementum pulvinar. Justo nec ultrices dui sapien
eget. Nisi quis eleifend quam adipiscing vitae. Mauris sit amet massa vitae tortor condimentum. Velit euismod in pellentesque massa placerat duis ultricies. Nunc sed blandit libero volutpat sed cras ornare. Tempus egestas sed sed risus pretium quam
vulputate dignissim. Lacus sed viverra tellus in hac. Quam adipiscing vitae proin sagittis. Mi in nulla posuere sollicitudin aliquam. Ut etiam sit amet nisl purus in. Enim sed faucibus turpis in eu. In arcu cursus euismod quis. Amet consectetur adipiscing
elit duis tristique sollicitudin nibh sit amet. In iaculis nunc sed augue lacus. Egestas fringilla phasellus faucibus scelerisque eleifend. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Vitae sapien pellentesque habitant morbi
tristique senectus et netus et. Duis ultricies lacus sed turpis tincidunt id. Nunc pulvinar sapien et ligula ullamcorper. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Dignissim cras tincidunt lobortis feugiat vivamus at augue
eget arcu. Dignissim suspendisse in est ante. Sed cras ornare arcu dui vivamus. Id porta nibh venenatis cras. Dignissim enim sit amet venenatis urna cursus eget. Eu tincidunt tortor aliquam nulla facilisi. Netus et malesuada fames ac turpis egestas
sed tempus urna. Turpis in eu mi bibendum neque egestas congue quisque. Non tellus orci ac auctor augue mauris augue. Nisi scelerisque eu ultrices vitae auctor. Nunc sed blandit libero volutpat sed cras. Ornare lectus sit amet est placerat in egestas
erat imperdiet. Praesent elementum facilisis leo vel. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. Ut enim blandit volutpat maecenas volutpat blandit. Senectus et netus et malesuada fames.
</div>
<div id="banner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Vel elit scelerisque mauris pellentesque. Diam phasellus vestibulum
lorem sed risus ultricies tristique nulla. Facilisis magna etiam tempor orci. Convallis a cras semper auctor neque vitae tempus. Lorem sed risus ultricies tristique. Gravida cum sociis natoque penatibus.
</div>
It may work better if you put it in full screen, It's not really optimized for stack overflow's small snippet size. If you need it to work for that I recommend some #media queries that remove the centering and move the banner over more.

Answer 2

You can center the content using flex box. code snippet and I attached code pen url in here. I used dummy content for the banner for reference. And remenber add height and width to 100% inorder to effect on the flexbox on wrapper div.And make sure to add min-width to content div and banner div to different screen sizes using media query.In here I didn't add media query since your content might be different than me.
code pen url click here
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 600px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
#banner {
min-width: 150px;
align-self: flex-start
}
<div class="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Facilisi cras
fermentum odio eu feugiat pretium nibh ipsum. Vel elit scelerisque
mauris pellentesque. Diam phasellus vestibulum lorem sed risus ultricies
tristique nulla. Facilisis magna etiam tempor orci. Convallis a cras
semper auctor neque vitae tempus. Lorem sed risus ultricies tristique.
Gravida cum sociis natoque penatibus. A cras semper auctor neque vitae
tempus quam pellentesque. Morbi tristique senectus et netus et. Platea
dictumst quisque sagittis purus sit amet. Eget nunc scelerisque viverra
mauris in aliquam sem fringilla. Mauris nunc congue nisi vitae suscipit
tellus mauris. Sed nisi lacus sed viverra tellus. Eget mi proin sed
libero enim sed faucibus. Gravida quis blandit turpis cursus in. Purus
non enim praesent elementum facilisis. Odio aenean sed adipiscing diam
donec. Id eu nisl nunc mi ipsum. Tellus mauris a diam maecenas sed enim.
Nibh praesent tristique magna sit. Sapien nec sagittis aliquam malesuada
bibendum. Commodo elit at imperdiet dui accumsan sit amet nulla. Augue
neque gravida in fermentum et. Augue eget arcu dictum varius duis at.
Diam vel quam elementum pulvinar. Justo nec ultrices dui sapien eget.
Nisi quis eleifend quam adipiscing vitae. Mauris sit amet massa vitae
tortor condimentum. Velit euismod in pellentesque massa placerat duis
ultricies. Nunc sed blandit libero volutpat sed cras ornare. Tempus
egestas sed sed risus pretium quam vulputate dignissim. Lacus sed
viverra tellus in hac. Quam adipiscing vitae proin sagittis. Mi in nulla
posuere sollicitudin aliquam. Ut etiam sit amet nisl purus in. Enim sed
faucibus turpis in eu. In arcu cursus euismod quis. Amet consectetur
adipiscing elit duis tristique sollicitudin nibh sit amet. In iaculis
nunc sed augue lacus. Egestas fringilla phasellus faucibus scelerisque
eleifend. Feugiat scelerisque varius morbi enim nunc faucibus a
pellentesque sit. Vitae sapien pellentesque habitant morbi tristique
senectus et netus et. Duis ultricies lacus sed turpis tincidunt id. Nunc
pulvinar sapien et ligula ullamcorper. Commodo odio aenean sed
adipiscing diam donec adipiscing tristique. Dignissim cras tincidunt
lobortis feugiat vivamus at augue eget arcu. Dignissim suspendisse in
est ante. Sed cras ornare arcu dui vivamus. Id porta nibh venenatis
cras. Dignissim enim sit amet venenatis urna cursus eget. Eu tincidunt
tortor aliquam nulla facilisi. Netus et malesuada fames ac turpis
egestas sed tempus urna. Turpis in eu mi bibendum neque egestas congue
quisque. Non tellus orci ac auctor augue mauris augue. Nisi scelerisque
eu ultrices vitae auctor. Nunc sed blandit libero volutpat sed cras.
Ornare lectus sit amet est placerat in egestas erat imperdiet. Praesent
elementum facilisis leo vel. Tortor dignissim convallis aenean et tortor
at risus viverra adipiscing. Ut enim blandit volutpat maecenas volutpat
blandit. Senectus et netus et malesuada fames.
</div>
<div id="banner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Facilisi cras
fermentum odio eu feugiat pretium nibh ipsum. Vel elit scelerisque
mauris pellentesque. Diam phasellus vestibulum lorem sed risus ultricies
tristique nulla. Facilisis magna etiam tempor orci. Convallis a cras
semper auctor neque vitae tempus. Lorem sed risus ultricies tristique.
Gravida cum sociis natoque penatibus.
</div>
</div>