I am trying to place an image in front of text, which is inside a div. Almost ever search for this brings results on how to put text in front of an image. This is not what I want to do.
In the following example I have a gif and tried using z-index: -1; in the CSS but this is not working.
The HTML
div {
position: relative;
}
img {
position: absolute;
z-index: 1;
vertically-align: middle;
left: 50%;
}
<div>
<img width="100" height="100" src="http://bestanimations.com/Animals/Reptiles/Dinosaurs/dinosaur-animated-gif-6.gif" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis aliquam eros, sed vehicula eros rhoncus eu. Cras bibendum rhoncus nisl, non venenatis enim interdum vel. Mauris sodales risus ac ex suscipit ultricies. Duis neque purus, auctor
non magna vel, euismod posuere metus. Fusce sit amet tortor quis felis consectetur iaculis. Phasellus risus nibh, finibus lacinia porta a, sagittis quis orci. Integer feugiat sit amet diam sit amet accumsan. In at finibus eros, vitae dictum eros. Donec
dignissim tellus id dui auctor convallis. Donec in faucibus eros, at ultrices felis. Vivamus eros augue, suscipit a dignissim et, efficitur nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis consequat neque, et placerat
tellus mollis ac. Curabitur ut pulvinar neque, eu aliquam purus. Vestibulum imperdiet, orci eget molestie ultricies, est dui faucibus dui, et venenatis neque sem non lorem. In in massa condimentum, vulputate lacus vitae, posuere lorem. Nullam faucibus
augue a dolor vestibulum, id efficitur augue aliquam. Fusce in ipsum aliquet, scelerisque augue ac, pretium urna. Nunc rutrum lacus vitae magna congue, vel finibus ligula sodales. Aenean vitae egestas lectus. Quisque ut pretium nunc. Curabitur id lectus
est. Duis nulla elit, vestibulum vitae pulvinar sit amet, tristique ut leo. Curabitur finibus ipsum sit amet ante venenatis efficitur. Fusce molestie nibh nec nisi pretium finibus. Ut ullamcorper sapien sapien, ut dictum libero elementum et. Cras sapien
augue, placerat vitae venenatis in, tempor sed enim. Nullam interdum, ante a pretium condimentum, ante lacus sollicitudin odio, at luctus lectus elit in mauris. Aenean a hendrerit neque, et porta ipsum. Maecenas tincidunt, eros eu auctor posuere, odio
felis tincidunt leo, id pellentesque neque neque nec diam. Sed ac ante ac neque porta suscipit. Sed nec lacus ligula. Nunc maximus fermentum risus eget vehicula. Sed ac varius tortor. Fusce blandit mollis commodo. Quisque orci magna, consequat et orci
at, consequat interdum arcu. Vestibulum vel iaculis magna, ut gravida enim. Nullam sollicitudin pharetra auctor. Mauris vulputate justo lorem, non aliquet elit cursus sed. Duis ultricies euismod diam, in rhoncus nisi auctor sit amet. Morbi dignissim
fermentum sem, vel volutpat quam accumsan ut. Suspendisse potenti. Aliquam quis lectus metus.
<div>
<div>
I am a second div
</div>
Thanks,
You could just do this:
img {
position: absolute;
z-index: 1;
}
And, if you make the parent div relative:
div {
position: relative;
}
You can move your image anywhere inside that text div:
img {
position: absolute;
z-index: 1;
left: 30px;
top: 20px;
}
To trigger z-index you need to reset position to any valid value but static:
absolute:
img,
span {
vertical-align: middle;
}
img {
position:absolute;
z-index: -1;
}
<div>
<img width="100" height="100" src="http://bestanimations.com/Animals/Reptiles/Dinosaurs/dinosaur-animated-gif-6.gif" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis aliquam eros, sed vehicula eros rhoncus eu. Cras bibendum rhoncus nisl, non venenatis enim interdum vel. Mauris sodales risus ac ex suscipit ultricies. Duis neque purus, auctor
non magna vel, euismod posuere metus. Fusce sit amet tortor quis felis consectetur iaculis. Phasellus risus nibh, finibus lacinia porta a, sagittis quis orci. Integer feugiat sit amet diam sit amet accumsan. In at finibus eros, vitae dictum eros. Donec
dignissim tellus id dui auctor convallis. Donec in faucibus eros, at ultrices felis. Vivamus eros augue, suscipit a dignissim et, efficitur nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis consequat neque, et placerat
tellus mollis ac. Curabitur ut pulvinar neque, eu aliquam purus. Vestibulum imperdiet, orci eget molestie ultricies, est dui faucibus dui, et venenatis neque sem non lorem. In in massa condimentum, vulputate lacus vitae, posuere lorem. Nullam faucibus
augue a dolor vestibulum, id efficitur augue aliquam. Fusce in ipsum aliquet, scelerisque augue ac, pretium urna. Nunc rutrum lacus vitae magna congue, vel finibus ligula sodales. Aenean vitae egestas lectus. Quisque ut pretium nunc. Curabitur id lectus
est. Duis nulla elit, vestibulum vitae pulvinar sit amet, tristique ut leo. Curabitur finibus ipsum sit amet ante venenatis efficitur. Fusce molestie nibh nec nisi pretium finibus. Ut ullamcorper sapien sapien, ut dictum libero elementum et. Cras sapien
augue, placerat vitae venenatis in, tempor sed enim. Nullam interdum, ante a pretium condimentum, ante lacus sollicitudin odio, at luctus lectus elit in mauris. Aenean a hendrerit neque, et porta ipsum. Maecenas tincidunt, eros eu auctor posuere, odio
felis tincidunt leo, id pellentesque neque neque nec diam. Sed ac ante ac neque porta suscipit. Sed nec lacus ligula. Nunc maximus fermentum risus eget vehicula. Sed ac varius tortor. Fusce blandit mollis commodo. Quisque orci magna, consequat et orci
at, consequat interdum arcu. Vestibulum vel iaculis magna, ut gravida enim. Nullam sollicitudin pharetra auctor. Mauris vulputate justo lorem, non aliquet elit cursus sed. Duis ultricies euismod diam, in rhoncus nisi auctor sit amet. Morbi dignissim
fermentum sem, vel volutpat quam accumsan ut. Suspendisse potenti. Aliquam quis lectus metus.
<div>
relative :
img,
span {
vertical-align: middle;
}
img {
position:relative;
margin-right:-100px;/* can be usefull*/
z-index: -1;
}
<div>
<img width="100" height="100" src="http://bestanimations.com/Animals/Reptiles/Dinosaurs/dinosaur-animated-gif-6.gif" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis aliquam eros, sed vehicula eros rhoncus eu. Cras bibendum rhoncus nisl, non venenatis enim interdum vel. Mauris sodales risus ac ex suscipit ultricies. Duis neque purus, auctor
non magna vel, euismod posuere metus. Fusce sit amet tortor quis felis consectetur iaculis. Phasellus risus nibh, finibus lacinia porta a, sagittis quis orci. Integer feugiat sit amet diam sit amet accumsan. In at finibus eros, vitae dictum eros. Donec
dignissim tellus id dui auctor convallis. Donec in faucibus eros, at ultrices felis. Vivamus eros augue, suscipit a dignissim et, efficitur nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis consequat neque, et placerat
tellus mollis ac. Curabitur ut pulvinar neque, eu aliquam purus. Vestibulum imperdiet, orci eget molestie ultricies, est dui faucibus dui, et venenatis neque sem non lorem. In in massa condimentum, vulputate lacus vitae, posuere lorem. Nullam faucibus
augue a dolor vestibulum, id efficitur augue aliquam. Fusce in ipsum aliquet, scelerisque augue ac, pretium urna. Nunc rutrum lacus vitae magna congue, vel finibus ligula sodales. Aenean vitae egestas lectus. Quisque ut pretium nunc. Curabitur id lectus
est. Duis nulla elit, vestibulum vitae pulvinar sit amet, tristique ut leo. Curabitur finibus ipsum sit amet ante venenatis efficitur. Fusce molestie nibh nec nisi pretium finibus. Ut ullamcorper sapien sapien, ut dictum libero elementum et. Cras sapien
augue, placerat vitae venenatis in, tempor sed enim. Nullam interdum, ante a pretium condimentum, ante lacus sollicitudin odio, at luctus lectus elit in mauris. Aenean a hendrerit neque, et porta ipsum. Maecenas tincidunt, eros eu auctor posuere, odio
felis tincidunt leo, id pellentesque neque neque nec diam. Sed ac ante ac neque porta suscipit. Sed nec lacus ligula. Nunc maximus fermentum risus eget vehicula. Sed ac varius tortor. Fusce blandit mollis commodo. Quisque orci magna, consequat et orci
at, consequat interdum arcu. Vestibulum vel iaculis magna, ut gravida enim. Nullam sollicitudin pharetra auctor. Mauris vulputate justo lorem, non aliquet elit cursus sed. Duis ultricies euismod diam, in rhoncus nisi auctor sit amet. Morbi dignissim
fermentum sem, vel volutpat quam accumsan ut. Suspendisse potenti. Aliquam quis lectus metus.
<div>
fixed (not the best):
img,
span {
vertical-align: middle;
}
img {
position:fixed;
z-index: -1;
}
<div>
<img width="100" height="100" src="http://bestanimations.com/Animals/Reptiles/Dinosaurs/dinosaur-animated-gif-6.gif" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis aliquam eros, sed vehicula eros rhoncus eu. Cras bibendum rhoncus nisl, non venenatis enim interdum vel. Mauris sodales risus ac ex suscipit ultricies. Duis neque purus, auctor
non magna vel, euismod posuere metus. Fusce sit amet tortor quis felis consectetur iaculis. Phasellus risus nibh, finibus lacinia porta a, sagittis quis orci. Integer feugiat sit amet diam sit amet accumsan. In at finibus eros, vitae dictum eros. Donec
dignissim tellus id dui auctor convallis. Donec in faucibus eros, at ultrices felis. Vivamus eros augue, suscipit a dignissim et, efficitur nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis consequat neque, et placerat
tellus mollis ac. Curabitur ut pulvinar neque, eu aliquam purus. Vestibulum imperdiet, orci eget molestie ultricies, est dui faucibus dui, et venenatis neque sem non lorem. In in massa condimentum, vulputate lacus vitae, posuere lorem. Nullam faucibus
augue a dolor vestibulum, id efficitur augue aliquam. Fusce in ipsum aliquet, scelerisque augue ac, pretium urna. Nunc rutrum lacus vitae magna congue, vel finibus ligula sodales. Aenean vitae egestas lectus. Quisque ut pretium nunc. Curabitur id lectus
est. Duis nulla elit, vestibulum vitae pulvinar sit amet, tristique ut leo. Curabitur finibus ipsum sit amet ante venenatis efficitur. Fusce molestie nibh nec nisi pretium finibus. Ut ullamcorper sapien sapien, ut dictum libero elementum et. Cras sapien
augue, placerat vitae venenatis in, tempor sed enim. Nullam interdum, ante a pretium condimentum, ante lacus sollicitudin odio, at luctus lectus elit in mauris. Aenean a hendrerit neque, et porta ipsum. Maecenas tincidunt, eros eu auctor posuere, odio
felis tincidunt leo, id pellentesque neque neque nec diam. Sed ac ante ac neque porta suscipit. Sed nec lacus ligula. Nunc maximus fermentum risus eget vehicula. Sed ac varius tortor. Fusce blandit mollis commodo. Quisque orci magna, consequat et orci
at, consequat interdum arcu. Vestibulum vel iaculis magna, ut gravida enim. Nullam sollicitudin pharetra auctor. Mauris vulputate justo lorem, non aliquet elit cursus sed. Duis ultricies euismod diam, in rhoncus nisi auctor sit amet. Morbi dignissim
fermentum sem, vel volutpat quam accumsan ut. Suspendisse potenti. Aliquam quis lectus metus.
<div>
Try to use this:
img {
z-index: 1;
position: absolute;
}
And if you want the text in front of the image, just change the z-index to -1
If you want to locate the image in a different place, add this:
img {
z-index: 1;
position: absolute;
left: 50px;
top: 50px;
}
and change it as you wish.
Related
I am currently working on a table view in my Angular application I want to make a sticky header to provide better user experience. To achieve that in Chrome and Mozilla I used the following CSS code:
div.sticky-table-head {
overflow-y: auto;
overflow-x: auto;
height: 100%;
width: 100%;
}
.scroll{
margin-left: auto;
margin-right: auto;
}
.scroll th {
position: sticky;
top: 0;
background: lightblue;
}
.scroll td {
text-align: center;
padding: 5px;
background: lightgreen;
}
HTML:
<div>
<table class="scroll">
<thead>
<th>
<strong>ID</strong>
</th>
<th>
Column 1
</th>
<th>
Longer column 2
</th>
<th>
Column 3 that is longer
</th>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>Data</td>
<td>DataDataDataData</td>
<td>DataDataDataDataDataDataDataData</td>
</tr>
...
</tbody>
</table>
</div>
I need to achieve the same effect on IE 11 without using any scripts or jQuery, only Angular mechanichs. Pure CSS and HTML would be the best.
Here is JSFiddle presenting current solution: https://jsfiddle.net/bn5L1fhm/
Is there any way that I can solve my problem without changing too much of my code?
IE doesn't support position: sticky and as far as I know, there is no standard way to achieve this with only CSS. You need script to achieve this in IE 11. We can only use position: fixed and listen for the scroll event of the page and use JavaScript to change the value of the position and top properties according to the current position of the viewport. The code used is like below:
var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
menu.classList.add('sticky');
menu.parentNode.insertBefore(placeholder, menu);
isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
menu.classList.remove('sticky');
menu.parentNode.removeChild(placeholder);
isAdded = false;
}
});
.header {
height: 50px;
background-color: #ddcbaf;
text-align: center;
padding-top: 20px;
}
.menu {
margin: 0;
padding: 0;
width: 100%;
background-color: #BFFFF3;
text-align: center;
}
.sticky {
top: 0;
position: fixed;
}
.container {
padding: 0 20px;
color: #989898;
}
<div class="header">
Title
</div>
<div class="menu">Home</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
</div>
And the closest approach with your situation I found is the solutin in this answer, you could also refer to it.
I have a strange problem with css pseudo elements. I tried to design an initial for my paragraph elements. I did this with the :first-of-type pseudo elment. It all woeked well. Then I wanted to add an info box to the right of the text. I used the pseudo element :before for it. When I did this, the initial changed it's height to the height of the before elment.
I set up an fiddle to show my code:
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
}
div.project_content:before {
content: "";
float: right;
height: 200px;
width: 0;
}
<div class="project-vorsch">
<div class="project_content">
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum
semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>
The problem is that the height in div.project_content:before affects both #facts and p.
If you want to offset the right-hand box and leave a gap in the text above it, instead use margin-top: 200px on #facts:
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
margin-top: 200px;
}
<div class="project-vorsch">
<div class="project_content">
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum
semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>
If instead you want the text to wrap around the #facts element, I'd recommend simply moving the #facts <div> to sit in the HTML structure where you want it to appear:
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
}
<div class="project-vorsch">
<div class="project_content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales.
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>
Hope this helps! :)
sorry if this title isn't really the issue, I can't think of any other way to describe it.
If you look at the attached js fiddle, you'll see that there is a vertically centered div that grows off the top of the page, and cannot be seen or scrolled to.
https://jsfiddle.net/xdmkm2e4/
Please also see code below:
HTML:
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
vitae molestie quam imperdiet. Integer mollis turpis nec metus tincidunt imperdiet. Aenean mollis at nisl at venenatis. Sed sodales, nibh ut aliquet fermentum, erat purus convallis orci, a feugiat purus ex sit amet dui. Pellentesque vel elementum
nisi, lobortis rutrum nibh. Donec at hendrerit metus. Nam elementum semper tortor, quis gravida ex suscipit sit amet. Sed at tellus suscipit augue varius posuere. Donec eu diam erat. Pellentesque tristique porttitor nisi sed lobortis. Proin tempor
elit sit amet est ultricies rutrum. Fusce sit amet cursus risus, sed tincidunt urna. Praesent ultrices mattis ullamcorper. Morbi quis mattis enim. Vivamus in magna ut lacus congue feugiat. Donec viverra ultrices nisi, id lacinia ante tempor eget.
Aenean in auctor tortor, vitae viverra mi. Vivamus facilisis dignissim massa id dignissim. Maecenas nec quam id libero lobortis vulputate. Nam in hendrerit arcu, vel luctus nulla. Nam eu nisl iaculis, vehicula justo id, finibus augue. Ut faucibus,
risus quis lacinia auctor, ex massa euismod nisi, nec vulputate nisi elit ut urna. Donec semper massa nec vestibulum iaculis. Aliquam odio sapien, porttitor in ultricies eget, efficitur a nisi. Nullam sagittis ex sit amet leo ullamcorper semper.
Quisque vitae pharetra nisl. Aliquam efficitur vulputate lectus nec accumsan. Aenean pulvinar sit amet ligula a iaculis. Aenean non odio ligula. Praesent arcu leo, scelerisque ut lorem et, fringilla scelerisque nulla. Ut porta felis vehicula, faucibus
ligula tincidunt, pulvinar urna. Ut nec nisi vel orci volutpat dapibus eu ut urna. In finibus sem vel mauris mattis viverra. Morbi vitae elit at lorem mollis cursus. Aenean nec enim faucibus, maximus est nec, maximus nibh. Pellentesque laoreet,
felis id rhoncus gravida, dolor lorem porttitor felis, et feugiat diam nibh at magna. Fusce mollis congue magna, et sollicitudin lectus maximus vel. Etiam ac nisi sed purus placerat faucibus vel at dui. Praesent vel orci at sem ultricies sodales
malesuada eu eros. Morbi commodo fermentum tellus eu gravida. Mauris accumsan bibendum velit, ac pharetra nisl blandit a. Aenean sed venenatis libero. Mauris id sapien quis felis volutpat mollis sed eget tortor. Quisque viverra maximus urna non
tristique. Donec venenatis elementum enim vitae viverra. Nam vitae nisi dictum, pellentesque urna nec, lobortis risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur interdum dolor ut nibh efficitur,
in iaculis sem iaculis. Quisque sit amet lacus eu metus posuere tincidunt. Aenean nec vulputate velit. Fusce cursus consectetur urna, ac aliquet sapien molestie nec. Nunc vel imperdiet purus. Etiam cursus accumsan magna at imperdiet. Sed fringilla
finibus laoreet. In elementum non est ac ultricies. Morbi enim turpis, convallis sed luctus non, dignissim id ante. Aenean sollicitudin fringilla elit, sit amet egestas diam aliquam et. Vestibulum non maximus odio. Proin consequat augue vel gravida
sagittis. Sed in gravida enim, in consequat dolor. Mauris vitae ligula ullamcorper turpis ultrices volutpat non id sem. Donec mollis est pellentesque, venenatis velit ut, mollis leo. Vestibulum sit amet dolor quis dolor facilisis vulputate. In placerat
ultrices ligula, eget maximus ex sodales id. Nunc at tristique diam. Fusce at elementum turpis, ac scelerisque purus. Donec convallis orci ac sem aliquet commodo. Aenean efficitur pharetra condimentum. Mauris eget magna at dui posuere faucibus cursus
vitae lectus. Sed pharetra neque augue, eget tempor enim porttitor porta. Integer tincidunt finibus risus, quis tempor nisi pellentesque sit amet. Maecenas mollis euismod libero, eu blandit risus commodo in. Aliquam eu velit varius lectus lobortis
fermentum vitae et augue. Integer mattis dignissim tristique. Nunc semper sapien ut ligula aliquam, nec pretium justo congue. Phasellus non felis egestas, scelerisque nibh vel, pellentesque odio. Nulla facilisi. Donec ullamcorper justo sem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien vitae augue laoreet tincidunt nec ac lectus. Integer maximus elit a quam tristique ultrices. Sed a diam eget arcu semper euismod. Praesent efficitur quam
magna, auctor feugiat neque vulputate sed. Sed sodales iaculis hendrerit. Donec vestibulum enim a lorem accumsan, in suscipit massa tincidunt. Praesent a orci sapien. Nam convallis mi urna, at porttitor elit porta eu. Aliquam ligula mauris, tincidunt
ac maximus id, scelerisque sit amet purus. Etiam vehicula elementum porta. Nulla congue tincidunt mauris eu tempus. Donec rutrum interdum nunc, ac commodo nibh condimentum vulputate. Duis eu ante et nisl aliquam interdum eu ut sem. Mauris non porttitor
diam. Vivamus eleifend enim sit amet quam euismod pellentesque vitae ac purus. Aliquam erat volutpat. Nulla ac nibh ex. Etiam sed ullamcorper ipsum. Etiam posuere elementum orci a viverra. Suspendisse potenti. Donec metus magna, accumsan ac lacinia
quis, accumsan vulputate lorem. Aenean dictum turpis consequat iaculis faucibus. Duis nec odio non massa laoreet mattis. Nunc pharetra vitae arcu scelerisque fermentum. Aliquam non elementum libero. Mauris efficitur, nulla id sagittis viverra, orci
felis mattis magna, a vulputate orci purus ut lacus. In eleifend lacus ut ante faucibus, non rhoncus sem lobortis. Donec venenatis nunc sit amet varius laoreet. Vestibulum tristique, neque aliquet sagittis eleifend, nulla odio blandit tortor, quis
rutrum ligula ligula vel erat. Sed hendrerit dictum porta. Donec ullamcorper ligula non tortor dapibus, vulputate porttitor arcu gravida. Nam vitae nunc aliquet, mollis nisl ac, bibendum arcu. Aliquam at dapibus dui. Nulla at pharetra lorem. Fusce
efficitur in massa non lacinia. Proin vel lacus ipsum. Donec pharetra molestie libero quis imperdiet. Ut nec mauris quis turpis mattis gravida quis vitae massa. Morbi sodales urna eget ex tristique finibus. Donec eget arcu nisi. Aliquam quis eleifend
dolor. Praesent eu lobortis magna. Curabitur congue neque et mauris eleifend laoreet. Maecenas vel semper enim. Nulla ligula odio, accumsan ut laoreet sed, feugiat vitae diam. Mauris placerat ultrices tortor, vel dignissim nibh scelerisque fermentum.
In non consequat enim. Aliquam auctor mauris sit amet aliquet condimentum. Morbi nibh lorem, mattis ut metus sed, mattis sollicitudin odio. In hac habitasse platea dictumst. Sed tempus consequat felis, eu convallis lacus sagittis nec. In hac habitasse
platea dictumst. Praesent eget congue lacus, non tempor odio. Aliquam vitae augue lacinia, semper eros rutrum, elementum felis. Praesent pharetra nunc nisi, id suscipit nibh bibendum accumsan. Nam consectetur, metus eget malesuada suscipit, quam
diam ullamcorper leo, vel posuere dolor ligula non lacus. Nulla pharetra malesuada accumsan. Aenean faucibus vel justo quis tincidunt. Cras cursus sem nunc, eu tincidunt mauris facilisis vitae. Sed feugiat fermentum ipsum sed ultricies. Nullam suscipit
sapien a nisi blandit finibus. Aliquam pretium aliquam massa nec dapibus. Etiam vulputate, ipsum sed vestibulum pellentesque, turpis nulla blandit risus, sit amet vestibulum magna eros et tellus. Integer euismod congue orci sed tristique. Maecenas
eu sem eleifend, sollicitudin tortor suscipit, malesuada lacus. Nullam eleifend sollicitudin convallis. Cras volutpat vulputate pellentesque. Quisque laoreet cursus sapien, nec iaculis risus pharetra vitae. Cras non finibus ante. Suspendisse arcu
arcu, dignissim ut tellus et, venenatis hendrerit libero. Fusce et vestibulum purus, sed vulputate lectus. Suspendisse nec purus ac tellus blandit pellentesque. Ut a tincidunt ante. Vivamus congue dapibus tortor vitae dignissim. Maecenas eget tempus
ante, tincidunt fermentum ex. Duis molestie nulla vitae nisl vestibulum, a egestas purus posuere. Nunc pretium mollis eros eget pharetra. Nulla id feugiat dui. Nullam felis sapien, mattis porta massa at, pharetra dignissim augue. Cras semper urna
nec diam finibus, sed iaculis diam consequat. Sed vehicula laoreet tempus. Nunc pulvinar ipsum non velit interdum, eget sollicitudin nibh commodo. Duis massa sem, dictum sit amet elementum et, lacinia nec dui. Sed pulvinar elit sapien. Nunc sit
amet erat tincidunt, porta diam efficitur, egestas neque. Curabitur at ante ut massa condimentum cursus. Nullam pharetra, erat ac eleifend ultrices, est augue semper metus, ac rhoncus metus lorem vitae augue. Nulla sagittis, diam a mattis aliquet,
odio eros scelerisque nisl, id tincidunt nisi felis non ipsum. Morbi pulvinar a elit consequat malesuada. Vestibulum nec ligula facilisis, rhoncus mi laoreet, commodo quam. Nullam imperdiet aliquet dui in rutrum. Duis tristique massa sit amet arcu
efficitur imperdiet. Sed interdum erat id nunc euismod aliquet. Aenean in interdum urna. Aliquam dapibus magna nec dui rhoncus scelerisque. Fusce dignissim lobortis purus, eget facilisis purus. Proin tincidunt lectus vel eros volutpat feugiat. Ut
sed congue sem.
</p>
</div>
</div>
CSS:
#CONTENT {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 20px;
}
My goal is to get it so that the top of the div is centered, but that content grows the div downwards rather than upwards.
Any help would be greatly appreciated!
Use {margin: 0 auto;} to center things at the top.
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
Also, as #Bosc pointed out;
you can give the <div> a fixed height and make it scroll-able.
To achieve this you can use {overflow-y:scroll}
Like so
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em;
overflow-y: scroll;
max-height: 50vh;
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
You can also take it one step further and remove the scrollbar from the <div>
However, note that this is only supported by -webkit- browsers. The scrollbar will still show up for FF and IE users.
Open the snippet below with a webkit browser to see the effect:
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em;
overflow-y: scroll;
max-height: 50vh;
}
#CONTENT::-webkit-scrollbar {
width: 0;
height: 0;
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
Are you trying to get it vertically-aligned center? If not, you don't need to do the transform translate. From what I've seen it's only used for images.
If you do something like this it should work:
#CONTENT {
position: absolute;
top: 10%;
width: 70vw;
margin: 0 auto;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 20px;
}
I can't describe nicely but, I think this is what you wanted.
#CONTENT {
position: absolute;
top: 10%;
left: 10%;
width: 70vw;
margin-bottom: 20px;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 10px 20px;
}
I'll give you the jsfiddle link, https://jsfiddle.net/7evkdv20/
Here is the design I'm trying to do.
So I decided to put three part.
top_bg
content
footer_bg
I have given absoulte position to bgs to fix at top and bottom. But the thing is the footer_bg image is not sitting at bottom instead coming at top even though I have given bottom 0.
CODE
MARKUP
<div id="top_bg">
<img src="https://images.unsplash.com/photo-1438368915865-a852ef86fc42?q=80&fm=jpg&s=15e4744077e36852ba57f46f4660dc7a" />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. Sed sit amet libero mi. Fusce suscipit, lorem at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at velit maximus, commodo ligula vel, pharetra dui. Vivamus mollis mi eget nunc accumsan scelerisque. Fusce non mauris sit amet nibh malesuada faucibus.</p>
<p>Donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, at convallis elit turpis quis sem. Donec enim augue, tempus ac scelerisque euismod, congue sed nisi. Vestibulum sed fermentum nisi, nec lacinia mi. Duis ut consectetur sem. Pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. Phasellus non turpis augue. Nam ut felis dapibus, viverra arcu et, tincidunt neque. In at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at diam volutpat, tempor ante eu, cursus dolor. Integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>
<p>Aenean cursus porttitor eleifend. Morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. Aenean eu dolor nec elit ultrices cursus at sed magna. Donec quis porta nulla, in dictum arcu. Pellentesque porttitor dui vitae euismod consectetur. Pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. In hac habitasse platea dictumst. Praesent pharetra ex a dictum consectetur. Fusce finibus sapien vel iaculis mollis. Nunc vel luctus enim.</p>
<p>Aliquam lacinia vestibulum tempor. Etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. Cras a dui eget lacus mattis volutpat in sed tortor. Aliquam lobortis sapien sit amet pharetra varius. Donec eget aliquam nisi. Morbi quis mattis quam. Nullam porta suscipit dignissim. In hac habitasse platea dictumst. Praesent in dui id dui porta lacinia. Nam odio tortor, volutpat non auctor id, placerat nec augue. Suspendisse quis pretium ligula, quis accumsan tortor. Cras eu est vitae orci egestas rhoncus eu non dolor. Integer vehicula suscipit magna ut varius. Maecenas sagittis leo id nisl sagittis viverra.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sed consectetur neque, a pellentesque turpis. Sed quis orci diam. Aenean vel ultricies ipsum, id accumsan mi. Sed hendrerit sollicitudin nisi bibendum hendrerit. Duis nec hendrerit ipsum. Suspendisse congue mauris ut viverra dapibus. Fusce ut blandit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus sapien et felis dictum aliquet. Pellentesque a pretium leo. Duis rhoncus bibendum fermentum. Proin ac massa euismod, pretium odio vel, vehicula risus. Aenean posuere eros non orci maximus, tristique varius felis elementum. Etiam eget maximus massa, in facilisis ipsum. Integer eleifend auctor diam scelerisque tempor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. Sed sit amet libero mi. Fusce suscipit, lorem at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at velit maximus, commodo ligula vel, pharetra dui. Vivamus mollis mi eget nunc accumsan scelerisque. Fusce non mauris sit amet nibh malesuada faucibus.</p>
<p>Donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, at convallis elit turpis quis sem. Donec enim augue, tempus ac scelerisque euismod, congue sed nisi. Vestibulum sed fermentum nisi, nec lacinia mi. Duis ut consectetur sem. Pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. Phasellus non turpis augue. Nam ut felis dapibus, viverra arcu et, tincidunt neque. In at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at diam volutpat, tempor ante eu, cursus dolor. Integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>
<p>Aenean cursus porttitor eleifend. Morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. Aenean eu dolor nec elit ultrices cursus at sed magna. Donec quis porta nulla, in dictum arcu. Pellentesque porttitor dui vitae euismod consectetur. Pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. In hac habitasse platea dictumst. Praesent pharetra ex a dictum consectetur. Fusce finibus sapien vel iaculis mollis. Nunc vel luctus enim.</p>
<p>Aliquam lacinia vestibulum tempor. Etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. Cras a dui eget lacus mattis volutpat in sed tortor. Aliquam lobortis sapien sit amet pharetra varius. Donec eget aliquam nisi. Morbi quis mattis quam. Nullam porta suscipit dignissim. In hac habitasse platea dictumst. Praesent in dui id dui porta lacinia. Nam odio tortor, volutpat non auctor id, placerat nec augue. Suspendisse quis pretium ligula, quis accumsan tortor. Cras eu est vitae orci egestas rhoncus eu non dolor. Integer vehicula suscipit magna ut varius. Maecenas sagittis leo id nisl sagittis viverra.</p>
</div>
<div id="footer_bg">
<img src="https://images.unsplash.com/photo-1438480478735-3234e63615bb?q=80&fm=jpg&s=8fddc1c4c240e145cf6b65a21ae92087">
</div>
STYLE
#top_bg,#footer_bg{
position:absolute;
z-index:-99999;
}
#top_bg,#footer_bg img{
width:100%;
}
#top_bg{
top:0;
}
#footer_bg{
bottom:0;
}
#content{
background-color:white;
margin:40px;
margin-top:100px;
padding:10px;
}
JSFIDDLE
Why is this happening? There is no float used here. What is the problem?
To my thinking footer_bg parent is body and I have given bottom 0 so it should fit at the bottom of the page. I don't know why it is not happening.
How to have the footer_bg image at the bottom of page?
update your css with
body {
position:relative;
}
and yes you can update z-index to -1
Here check this, As said Body should be relative.
Check here : [FIDDLE][1]
[1]: http://jsfiddle.net/vinayak5192/jtm0wr4L/4/
I’m trying to enable the overflow: scroll property as the content keeps overflowing, but the scroll bar doesn’t work at all. How to fix this? Is there any other way to make sure the content can be seen on the screen?
#pageback {
background-color: #00003D;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#pagewrap {
overflow: scroll;
padding: 10px;
background-color: #000099;
width: 87.5%;
height: auto;
margin: 0 auto;
overflow: scroll;
}
h1,
h2 {
color: white;
}
p {
color: silver;
}
<div id="pageback">
<h1>PageBackground</h1>
<div id="pagewrap">
<h2>Pagewrap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum nisi, iaculis vitae dolor eget, fermentum convallis mauris. Nulla justo nunc, porttitor vitae posuere vel, vulputate at tortor. Maecenas ut bibendum tortor. Donec convallis, purus nec vulputate tempor, tortor lorem condimentum tellus, nec luctus leo lectus id mauris. Praesent convallis non tortor vel mattis. Curabitur sodales semper nulla. Fusce posuere tristique dui, id sodales enim malesuada id. Donec auctor ipsum nec pulvinar tincidunt. Donec sit amet leo vitae dui semper scelerisque. Praesent eleifend sit amet orci eget consectetur.</p>
<p>Quisque ac felis nulla. Morbi nec lacus iaculis, pulvinar sem non, venenatis urna. Pellentesque molestie urna eu sem pellentesque, vitae sollicitudin ipsum aliquam. Morbi finibus, urna ut venenatis feugiat, risus nisi fringilla libero, quis rhoncus libero lacus quis nisl. Morbi sagittis viverra sapien at eleifend. Nam et mattis nibh. Phasellus lobortis posuere rutrum. Morbi at accumsan urna. Donec vehicula a sapien eu pretium. In scelerisque ut mi ac mollis. Aliquam bibendum sem justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac enim erat.</p>
<p>Fusce sit amet accumsan neque, cursus sagittis dolor. Vestibulum venenatis sapien sem, mollis sagittis neque pharetra sit amet. Morbi hendrerit arcu purus, et auctor ex porttitor at. Morbi ut pellentesque arcu. Integer efficitur tortor non eros posuere ultricies. Sed sollicitudin imperdiet libero id euismod. Morbi lobortis feugiat diam, in dignissim purus congue vel. Donec consectetur, leo quis imperdiet maximus, dui arcu gravida lectus, quis vehicula ipsum ipsum vitae mauris. Vivamus magna ante, dapibus ut tincidunt ut, tempor a felis. Pellentesque elit velit, venenatis eget lobortis pretium, pulvinar eu magna.</p>
<p>Pellentesque pretium rutrum lobortis. Aliquam odio arcu, elementum eu turpis sit amet, rutrum ultrices sem. Maecenas eget efficitur dolor, vitae suscipit turpis. Nulla facilisi. Vivamus pellentesque velit sit amet nisl tincidunt, sit amet gravida est maximus. Fusce diam eros, tincidunt quis lacus quis, placerat luctus enim. Cras et ultrices est, eget gravida turpis. Curabitur tempus diam nec volutpat bibendum. In finibus arcu ut purus congue ultricies. Duis laoreet enim metus, sed malesuada odio scelerisque in. Donec pulvinar gravida finibus. Nunc eget lacus at lorem aliquet tristique a blandit orci.</p>
<p>Praesent a lacinia dolor. Pellentesque sagittis fermentum tincidunt. Vivamus volutpat tincidunt nulla non commodo. Donec non mi ultrices, aliquet nibh at, varius lectus. Ut malesuada feugiat arcu at rutrum. Nam rhoncus leo efficitur sodales blandit. Pellentesque laoreet nulla nec nunc volutpat commodo nec vitae ipsum. Quisque nec commodo magna. Morbi ut blandit urna. Integer eros quam, porta dapibus porttitor vitae, mollis et diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ac ornare tellus. Aenean commodo vitae turpis et tincidunt. In felis lectus, tristique in volutpat non, tristique non metus. Vivamus quis turpis mattis, venenatis nisl nec, varius nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum nisi, iaculis vitae dolor eget, fermentum convallis mauris. Nulla justo nunc, porttitor vitae posuere vel, vulputate at tortor. Maecenas ut bibendum tortor. Donec convallis, purus nec vulputate tempor, tortor lorem condimentum tellus, nec luctus leo lectus id mauris. Praesent convallis non tortor vel mattis. Curabitur sodales semper nulla. Fusce posuere tristique dui, id sodales enim malesuada id. Donec auctor ipsum nec pulvinar tincidunt. Donec sit amet leo vitae dui semper scelerisque. Praesent eleifend sit amet orci eget consectetur.</p>
<p>Quisque ac felis nulla. Morbi nec lacus iaculis, pulvinar sem non, venenatis urna. Pellentesque molestie urna eu sem pellentesque, vitae sollicitudin ipsum aliquam. Morbi finibus, urna ut venenatis feugiat, risus nisi fringilla libero, quis rhoncus libero lacus quis nisl. Morbi sagittis viverra sapien at eleifend. Nam et mattis nibh. Phasellus lobortis posuere rutrum. Morbi at accumsan urna. Donec vehicula a sapien eu pretium. In scelerisque ut mi ac mollis. Aliquam bibendum sem justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac enim erat.</p>
<p>Fusce sit amet accumsan neque, cursus sagittis dolor. Vestibulum venenatis sapien sem, mollis sagittis neque pharetra sit amet. Morbi hendrerit arcu purus, et auctor ex porttitor at. Morbi ut pellentesque arcu. Integer efficitur tortor non eros posuere ultricies. Sed sollicitudin imperdiet libero id euismod. Morbi lobortis feugiat diam, in dignissim purus congue vel. Donec consectetur, leo quis imperdiet maximus, dui arcu gravida lectus, quis vehicula ipsum ipsum vitae mauris. Vivamus magna ante, dapibus ut tincidunt ut, tempor a felis. Pellentesque elit velit, venenatis eget lobortis pretium, pulvinar eu magna.</p>
<p>Pellentesque pretium rutrum lobortis. Aliquam odio arcu, elementum eu turpis sit amet, rutrum ultrices sem. Maecenas eget efficitur dolor, vitae suscipit turpis. Nulla facilisi. Vivamus pellentesque velit sit amet nisl tincidunt, sit amet gravida est maximus. Fusce diam eros, tincidunt quis lacus quis, placerat luctus enim. Cras et ultrices est, eget gravida turpis. Curabitur tempus diam nec volutpat bibendum. In finibus arcu ut purus congue ultricies. Duis laoreet enim metus, sed malesuada odio scelerisque in. Donec pulvinar gravida finibus. Nunc eget lacus at lorem aliquet tristique a blandit orci.</p>
<p>Praesent a lacinia dolor. Pellentesque sagittis fermentum tincidunt. Vivamus volutpat tincidunt nulla non commodo. Donec non mi ultrices, aliquet nibh at, varius lectus. Ut malesuada feugiat arcu at rutrum. Nam rhoncus leo efficitur sodales blandit. Pellentesque laoreet nulla nec nunc volutpat commodo nec vitae ipsum. Quisque nec commodo magna. Morbi ut blandit urna. Integer eros quam, porta dapibus porttitor vitae, mollis et diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ac ornare tellus. Aenean commodo vitae turpis et tincidunt. In felis lectus, tristique in volutpat non, tristique non metus. Vivamus quis turpis mattis, venenatis nisl nec, varius nisi.</p>
</div>
</div>
Codepen
CSS
#pageback {
background-color: #00003D;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: 100%; /* changed */
position: fixed;
top: 0;
left: 0;
}
#pagewrap {
overflow: scroll;
padding: 10px;
background-color: #000099;
width: 87.5%;
height: inherit; /* changed */
margin: 0 auto;
overflow: scroll;
}
h1,
h2 {
color: white;
}
p {
color: silver;
}
DEMO