Im building an Angular2 application and have the following issue which I can't seem to solve or find a solution for. Here is an image of my page:
Code:
content.component.html
<app-header></app-header>
<div class="content">
</div>
content.component.css
.content{
height: calc(100vh - 60px);
background-color: rgb(167, 167, 167);
}
Header has a fixed height of 60px;
I want to give the content component a background-color and I'm looking for a <div> which has the following properties:
The <div> needs to fill up the whole page but not more than this (no scrollbars if not necessary).
The <div> should automatically adjust in size whenever scrollbars do arrive (when screen width is getting smaller and content pressed on top of each other).
I tried height: calc(100vh - headercomponentHeight) but this gives problems when the content is stacked and scrollbars pop up because the content will flow out of the <div>.
Something like this should work
header {
background: #ccc;
height: 60px;
}
main {
background: #ddd;
min-height: calc(100vh - 60px);
position: relative;
padding: 20px;
}
<header></header>
<main class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa sed elementum tempus egestas. Tempus quam pellentesque nec nam. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et. Nulla pellentesque dignissim enim sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. At urna condimentum mattis pellentesque id nibh. Diam in arcu cursus euismod quis viverra nibh. Nec feugiat nisl pretium fusce. Cras tincidunt lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in. Bibendum at varius vel pharetra. Sed velit dignissim sodales ut eu sem integer. Enim nec dui nunc mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa sed elementum tempus egestas. Tempus quam pellentesque nec nam. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et. Nulla pellentesque dignissim enim sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. At urna condimentum mattis pellentesque id nibh. Diam in arcu cursus euismod quis viverra nibh. Nec feugiat nisl pretium fusce. Cras tincidunt lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in. Bibendum at varius vel pharetra. Sed velit dignissim sodales ut eu sem integer. Enim nec dui nunc mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa sed elementum tempus egestas. Tempus quam pellentesque nec nam. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et. Nulla pellentesque dignissim enim sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. At urna condimentum mattis pellentesque id nibh. Diam in arcu cursus euismod quis viverra nibh. Nec feugiat nisl pretium fusce. Cras tincidunt lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in. Bibendum at varius vel pharetra. Sed velit dignissim sodales ut eu sem integer. Enim nec dui nunc mattis.</p>
</main>
Related
I have an issue with css grid
<div class="container">
<div class="q1">
<h4>Short Text</h2>
</div>
<div class="a1">
<p>LONG TEXT</p>
</div>
</div>
The LONG TEXT is going outside the div, I would like to keep it inside (it doesn't matter the height of the column). My css is:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
background-color: #ffe8d6;
filter: brightness(90%);
padding: 5px;
}
So the idea is having 2 columns of the same width and with the height defined by the LONG TEXT in the second one. Now the text is going outside the container.
You did not close your first div. In the Short Text you opened h4 but closing tag is h2. Fix these typo first. Here is the working code below. I have added q1 and a1 classes to check whether the text is inside the div or not.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
background-color: #ffe8d6;
filter: brightness(90%);
padding: 5px;
}
.q1 {
background: gray;
}
.a1 {
background: darkgray;
}
<div class="container">
<div class="q1">
<h4>Short Text</h4>
</div>
<div class="a1">
<p>LONG TEXT dsfsdfsd sdf sdfsdf sdfs dsdf sdfsdf dsf sdfsdf sdfs dfsdfsdf s</p>
</div>
</div>
I have just copy/pasted your code here and fixed one <h4> tag and one <div> tag. The div problem was that your <div class="container"> had no </div> to match it. The "Short Text" <h4> tag had a closing tag, but it was of the wrong type (h2). It looked like: <h4>Short Text</h2> and I changed it to: <h4>Short Text</h4>.
Additionally, I supplied sample text in each section to show the long and short sections more clearly.
Other than that, the code in this snippet is identical to yours. I didn't do anything to the CSS, but it seems that even with long text and short text, nothing is overflowing the containing div.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
background-color: #ffe8d6;
filter: brightness(90%);
padding: 5px;
}
<div class="container">
<div class="q1">
<h4>Short Text</h4>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Fames ac turpis egestas maecenas pharetra
convallis posuere. Quam nulla porttitor
massa id neque aliquam vestibulum morbi
blandit. Ligula ullamcorper malesuada proin
libero. Donec adipiscing tristique risus nec
feugiat.
</p>
</div>
<div class="a1">
<h4>Long Text</h4>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Nec sagittis aliquam malesuada bibendum arcu
vitae elementum. Tempor nec feugiat nisl
pretium. Libero justo laoreet sit amet. Ut
ornare lectus sit amet est. Ipsum dolor sit
amet consectetur. Et netus et malesuada
fames ac turpis. Tellus rutrum tellus
pellentesque eu tincidunt tortor aliquam. Et
ultrices neque ornare aenean euismod
elementum. Eu ultrices vitae auctor eu augue
ut lectus arcu bibendum. Velit sed
ullamcorper morbi tincidunt ornare.
Pellentesque habitant morbi tristique
senectus et netus. Mattis molestie a iaculis
at erat pellentesque adipiscing commodo
elit. Sit amet purus gravida quis blandit
turpis cursus in hac. Eget duis at tellus at
urna condimentum. Nunc mattis enim ut tellus
elementum sagittis. Dignissim enim sit amet
venenatis urna. Mauris cursus mattis
molestie a iaculis at erat. Malesuada nunc
vel risus commodo viverra.
</p>
<p>
In metus vulputate eu scelerisque felis
imperdiet proin fermentum. Tellus id
interdum velit laoreet id donec. Cras
adipiscing enim eu turpis egestas. Eget
nullam non nisi est sit amet facilisis.
Tristique nulla aliquet enim tortor at
auctor. Eu non diam phasellus vestibulum
lorem sed risus. Odio aenean sed adipiscing
diam donec adipiscing tristique. Fermentum
et sollicitudin ac orci phasellus egestas.
Placerat orci nulla pellentesque dignissim
enim sit amet venenatis urna. Donec pretium
vulputate sapien nec sagittis aliquam
malesuada bibendum arcu. Diam vel quam
elementum pulvinar etiam non quam. Aliquam
sem et tortor consequat id porta nibh
venenatis. Hac habitasse platea dictumst
vestibulum rhoncus est. Amet consectetur
adipiscing elit pellentesque habitant morbi
tristique senectus. Urna molestie at
elementum eu. Donec et odio pellentesque
diam volutpat commodo. Nibh sed pulvinar
proin gravida hendrerit lectus a.
</p>
<p>
Amet consectetur adipiscing elit duis
tristique sollicitudin nibh sit. Risus at
ultrices mi tempus imperdiet nulla
malesuada. Et pharetra pharetra massa massa
ultricies mi. Quam nulla porttitor massa id
neque aliquam vestibulum. Donec ac odio
tempor orci dapibus ultrices in iaculis.
Pharetra vel turpis nunc eget lorem dolor
sed viverra ipsum. Arcu non sodales neque
sodales ut. Vitae nunc sed velit dignissim
sodales ut eu sem integer. Cursus risus at
ultrices mi tempus imperdiet. Enim neque
volutpat ac tincidunt vitae semper quis.
Rhoncus urna neque viverra justo. Mattis
rhoncus urna neque viverra justo nec
ultrices.
</p>
<p>
Pellentesque adipiscing commodo elit at
imperdiet. Donec ac odio tempor orci dapibus
ultrices in iaculis nunc. Lacus vestibulum
sed arcu non odio. Elit ullamcorper
dignissim cras tincidunt. Aliquet sagittis
id consectetur purus. Nunc sed velit
dignissim sodales. Amet mattis vulputate
enim nulla aliquet porttitor lacus luctus.
Donec enim diam vulputate ut pharetra sit
amet aliquam. Purus in massa tempor nec
feugiat nisl pretium. Lacus laoreet non
curabitur gravida arcu ac tortor dignissim
convallis. Turpis massa sed elementum tempus
egestas sed sed risus pretium. Ut enim
blandit volutpat maecenas volutpat blandit
aliquam etiam.
</p>
<p>
Fermentum odio eu feugiat pretium nibh ipsum
consequat nisl. Euismod elementum nisi quis
eleifend quam adipiscing vitae proin. Id
neque aliquam vestibulum morbi blandit
cursus risus at ultrices. Libero nunc
consequat interdum varius sit amet.
Facilisis volutpat est velit egestas dui.
Ornare suspendisse sed nisi lacus sed
viverra tellus in. Rhoncus est pellentesque
elit ullamcorper. Eleifend quam adipiscing
vitae proin sagittis nisl rhoncus mattis
rhoncus. Pharetra sit amet aliquam id diam
maecenas ultricies. Tincidunt nunc pulvinar
sapien et ligula ullamcorper. Sed risus
ultricies tristique nulla aliquet enim
tortor at. Erat pellentesque adipiscing
commodo elit at imperdiet dui accumsan sit.
Eget nunc scelerisque viverra mauris.
</p>
</div>
</div>
I'm currently trying to animate an image inside a paragraph. The image is floating to the right, to have the text wrapping around it. I would like to animate the position of this image and having the text wrapping dynamically, how could I achieve that ?
img#img-1 {
animation: top_to_bottom 3s ease-in-out infinite;
float: right;
margin: 10px;
}
#keyframes top_to_bottom {
from {}
50% {
transform: translateY(100px);
}
to {
transform: translateY(0px);
}
}
<img src="https://picsum.photos/200" alt="" id="img-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis elementum nibh tellus. Ullamcorper dignissim cras tincidunt lobortis. Elit eget gravida cum sociis. Etiam sit amet nisl purus in mollis. Sapien et ligula ullamcorper malesuada proin libero. Massa tincidunt nunc pulvinar sapien et. Adipiscing enim eu turpis egestas pretium. Leo integer malesuada nunc vel risus commodo. Nunc consequat interdum varius sit amet mattis vulputate enim.
Vitae aliquet nec ullamcorper sit amet. Sem fringilla ut morbi tincidunt augue. Posuere morbi leo urna molestie at elementum eu facilisis sed. Sed arcu non odio euismod lacinia at quis risus. Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Tellus cras adipiscing enim eu turpis. Vitae ultricies leo integer malesuada. Est ultricies integer quis auctor. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Eu turpis egestas pretium aenean pharetra magna ac. Non blandit massa enim nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Diam sollicitudin tempor id eu nisl nunc mi. Et netus et malesuada fames. Sed enim ut sem viverra aliquet eget. Vel quam elementum pulvinar etiam non quam lacus. Et tortor at risus viverra adipiscing at in.
Libero volutpat sed cras ornare arcu dui vivamus arcu. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Velit dignissim sodales ut eu sem integer vitae. Turpis tincidunt id aliquet risus feugiat. Morbi tincidunt ornare massa eget egestas purus viverra. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Auctor urna nunc id cursus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Urna neque viverra justo nec. Lectus quam id leo in. Sed arcu non odio euismod. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Molestie nunc non blandit massa enim. Quam adipiscing vitae proin sagittis nisl rhoncus. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
</p>
shape-outside can do this:
img#img-1 {
animation: top_to_bottom 3s ease-in-out infinite;
float: right;
margin: 10px;
shape-outside: inset(0px 0 0 0);
}
p {
text-align:justify;
}
#keyframes top_to_bottom {
50% {
transform: translateY(100px);
shape-outside: inset(100px 0 0 0);
margin-bottom:110px;
}
}
<img src="https://picsum.photos/200" alt="" id="img-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis elementum nibh tellus. Ullamcorper dignissim cras tincidunt lobortis. Elit eget gravida cum
sociis. Etiam sit amet nisl purus in mollis. Sapien et ligula ullamcorper malesuada proin libero. Massa tincidunt nunc pulvinar sapien et. Adipiscing enim eu turpis egestas pretium. Leo integer malesuada nunc vel risus commodo. Nunc consequat interdum
varius sit amet mattis vulputate enim. Vitae aliquet nec ullamcorper sit amet. Sem fringilla ut morbi tincidunt augue. Posuere morbi leo urna molestie at elementum eu facilisis sed. Sed arcu non odio euismod lacinia at quis risus. Ultrices eros in cursus
turpis massa tincidunt dui ut ornare. Tellus cras adipiscing enim eu turpis. Vitae ultricies leo integer malesuada. Est ultricies integer quis auctor. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Eu turpis egestas pretium
aenean pharetra magna ac. Non blandit massa enim nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Diam sollicitudin tempor id eu nisl nunc mi. Et netus et malesuada fames. Sed enim ut sem viverra aliquet eget. Vel quam elementum pulvinar etiam
non quam lacus. Et tortor at risus viverra adipiscing at in. Libero volutpat sed cras ornare arcu dui vivamus arcu. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Velit dignissim sodales ut eu sem integer vitae. Turpis tincidunt
id aliquet risus feugiat. Morbi tincidunt ornare massa eget egestas purus viverra. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Auctor urna nunc id cursus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper
dignissim. Urna neque viverra justo nec. Lectus quam id leo in. Sed arcu non odio euismod. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Molestie nunc non blandit massa enim. Quam adipiscing vitae proin sagittis nisl rhoncus. Facilisi
cras fermentum odio eu feugiat pretium nibh ipsum. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
</p>
i know the title might sound confusing, but basically i am wondering if there's any way to use paragraph breaks but without space at the top or bottom when there's nothing above or below the text?
body {
font-family:arial;
background:#222;
}
#wrapper {
width:100%;
margin-top:100px;
}
.post_container {
background:#fff;
border:1px solid red;
width:500px;
height:auto;
text-align:justify;
padding:15px;
margin:0 auto;
margin-bottom:50px;
}
.post {
font-size:16px;
}
<body>
<div id="wrapper">
<div class="post_container">
<div class="post">
<div style="height:auto;max-height:550px;overflow:auto;scrollbar-width:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue. Amet aliquam id diam maecenas ultricies mi. Mi quis hendrerit dolor magna eget est. Pharetra magna ac placerat vestibulum lectus. Sagittis vitae et leo duis. Id nibh tortor id aliquet. Nullam non nisi est sit. Urna molestie at elementum eu facilisis. Pellentesque id nibh tortor id aliquet. Eget nullam non nisi est sit. Velit sed ullamcorper morbi tincidunt. Ac auctor augue mauris augue. Velit aliquet sagittis id consectetur. Amet justo donec enim diam vulputate ut pharetra sit. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Cursus eget nunc scelerisque viverra mauris in aliquam sem.</p>
<p>At lectus urna duis convallis convallis tellus id. Egestas sed sed risus pretium quam vulputate dignissim. Tristique senectus et netus et malesuada fames ac turpis. Volutpat commodo sed egestas egestas fringilla. Ipsum dolor sit amet consectetur adipiscing. Donec massa sapien faucibus et molestie ac feugiat. Blandit massa enim nec dui nunc mattis enim. Id ornare arcu odio ut sem nulla pharetra diam sit. Id venenatis a condimentum vitae sapien. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Turpis in eu mi bibendum neque egestas congue quisque. Quis varius quam quisque id diam vel quam elementum pulvinar. Nunc scelerisque viverra mauris in aliquam. Turpis egestas maecenas pharetra convallis posuere. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Ornare suspendisse sed nisi lacus sed viverra. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Varius duis at consectetur lorem donec massa sapien faucibus. At consectetur lorem donec massa sapien faucibus et molestie ac.</p>
<p>Fringilla ut morbi tincidunt augue interdum velit euismod. Mi quis hendrerit dolor magna eget. Ultricies integer quis auctor elit sed vulputate mi sit. Quis lectus nulla at volutpat. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Duis convallis convallis tellus id. Dignissim sodales ut eu sem. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Non enim praesent elementum facilisis. Ultricies mi eget mauris pharetra. Id leo in vitae turpis massa sed elementum. Cursus risus at ultrices mi. In iaculis nunc sed augue lacus viverra vitae congue. Aliquet bibendum enim facilisis gravida neque convallis a cras. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla.</p>
<p>Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Ut venenatis tellus in metus vulputate eu. Nibh venenatis cras sed felis eget velit aliquet sagittis. Amet cursus sit amet dictum sit amet justo donec. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Purus sit amet luctus venenatis lectus. Augue interdum velit euismod in. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Non tellus orci ac auctor augue mauris augue neque. Arcu dui vivamus arcu felis. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Eget dolor morbi non arcu risus. Rutrum tellus pellentesque eu tincidunt tortor. Enim facilisis gravida neque convallis a cras semper. Quis ipsum suspendisse ultrices gravida. A cras semper auctor neque vitae tempus quam.</p>
<p>Tincidunt dui ut ornare lectus sit amet est placerat. Ultricies lacus sed turpis tincidunt. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Lectus quam id leo in vitae turpis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Hac habitasse platea dictumst quisque sagittis purus. Amet aliquam id diam maecenas ultricies mi eget mauris. A lacus vestibulum sed arcu non odio euismod lacinia. Magna etiam tempor orci eu. Velit laoreet id donec ultrices tincidunt arcu. Aenean pharetra magna ac placerat vestibulum lectus mauris. Turpis cursus in hac habitasse platea dictumst. Imperdiet nulla malesuada pellentesque elit eget gravida. Magna eget est lorem ipsum dolor sit amet. Sagittis purus sit amet volutpat. Morbi tristique senectus et netus et malesuada fames ac turpis.</p>
</div> <!-- scroll style -->
</div> <!-- post -->
</div> <!-- post container -->
</body>
You have 15px of padding coming from post_container which you can change to padding: 0 15px; to remove the top and bottom padding. Then you need to override the default p style of margin: 1em as others have indicated. One way is shown below:
body {
font-family:arial;
background:#222;
}
#wrapper {
width:100%;
margin-top:100px;
}
.post_container {
background:#fff;
border:1px solid red;
width:500px;
height:auto;
text-align:justify;
padding:0 15px;
margin:0 auto;
margin-bottom:50px;
}
.post {
font-size:16px;
}
<div id="wrapper">
<div class="post_container">
<div class="post">
<div style="max-height:550px;overflow:auto;scrollbar-width:none;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>At lectus urna duis convallis convallis tellus id. Egestas sed sed risus pretium quam vulputate dignissim. Tristique senectus et netus et malesuada fames ac turpis. Volutpat commodo sed egestas egestas fringilla. </p>
<p style="margin: 0;">Fringilla ut morbi tincidunt augue interdum velit euismod. Mi quis hendrerit dolor magna eget. Ultricies integ</p>
</div> <!-- scroll style -->
</div> <!-- post -->
</div> <!-- post container -->
add the following in your .css file:
p {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
I'm having trouble with creating multiple parallax groups. I'm able to get it working for 1 group (1 parallax div and 1 content div). But when I added a second group, the scrolling became very weird. When I scrolled past the first group (the first group is still in view but partially), if I moved my cursor to the next div and keep scrolling, the part from the first group won't scroll.
Here's a fiddle that better explains it: https://jsfiddle.net/em6w25n8/
html:
<div class="main-container">
<div class="parallax-container">
<h>Lorem Ipsum</h>
</div>
<div class="content-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Scelerisque in dictum non consectetur a erat nam at lectus. Eu non diam phasellus vestibulum lorem sed risus. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. In aliquam sem fringilla ut morbi tincidunt augue. Dui vivamus arcu felis bibendum ut. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Rhoncus est pellentesque elit ullamcorper. Id velit ut tortor pretium. Pharetra massa massa ultricies mi quis. At in tellus integer feugiat scelerisque. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Amet porttitor eget dolor morbi non arcu risus.
Cras ornare arcu dui vivamus. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Cursus turpis massa tincidunt dui ut ornare lectus. Eget felis eget nunc lobortis mattis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Ut porttitor leo a diam sollicitudin tempor id eu. Vitae semper quis lectus nulla at volutpat. Iaculis eu non diam phasellus. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Sit amet risus nullam eget felis eget nunc. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt augue interdum velit euismod. Nunc mattis enim ut tellus elementum. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Consequat nisl vel pretium lectus quam id.</p>
</div>
</div>
<div class="main-container">
<div class="parallax-container">
<h>Lorem Ipsum</h>
</div>
<div class="content-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Scelerisque in dictum non consectetur a erat nam at lectus. Eu non diam phasellus vestibulum lorem sed risus. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. In aliquam sem fringilla ut morbi tincidunt augue. Dui vivamus arcu felis bibendum ut. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Rhoncus est pellentesque elit ullamcorper. Id velit ut tortor pretium. Pharetra massa massa ultricies mi quis. At in tellus integer feugiat scelerisque. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Amet porttitor eget dolor morbi non arcu risus.
Cras ornare arcu dui vivamus. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Cursus turpis massa tincidunt dui ut ornare lectus. Eget felis eget nunc lobortis mattis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Ut porttitor leo a diam sollicitudin tempor id eu. Vitae semper quis lectus nulla at volutpat. Iaculis eu non diam phasellus. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Sit amet risus nullam eget felis eget nunc. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt augue interdum velit euismod. Nunc mattis enim ut tellus elementum. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Consequat nisl vel pretium lectus quam id.</p>
</div>
</div>
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.
#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.
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>