Related
I am trying to have 2 rows with the height 100% of the windows. As you can see the 2 columns don't extend fully and the first box content overflows outside.
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
flex-direction: row;
display: flex;
}
.nav {
background: hotpink;
flex: 1;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
Try using background-size: cover; and position: fixed; like this:
html,
body {
padding: 0;
margin: 0;
}
.container {
height: 100%;
flex-direction: row;
display: flex;
position: fixed;
}
.nav {
background: hotpink;
flex: 1;
background-size: cover;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
You could make it scrollable by using overflow: auto
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
flex-direction: row;
display: flex;
}
.nav {
background: hotpink;
flex: 1;
overflow: auto;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
Or remove the height: 100% on .container so it's stretched by inner elements
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
flex-direction: row;
display: flex;
}
.nav {
background: hotpink;
flex: 1;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
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! :)
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.
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/
Important: The target rendering engine is WebKit2, so browser compatibility isn't a concern.
I want the following layout:
____________ ____________________
| | | |
| | | |
| | | |
| #sb | | #act |
| | | |
| | | |
| | | |
..................................................
| # footer |
..................................................
where #sb and #act should have their own vertical scroll bars (when needed); and the footer is FIXED to the bottom and always shown.
I've managed to code this layout but haven't been able to fix an irritating bug - When #sb and / or #act have scrollbars (due to content that doesn't fit in them), and when you scroll down to the end, the damn footer overlaps and hides the last few lines (or any other content). As such, part of the content at the bottom isn't visible.
This is the code -
HTML:
<body>
<div id="main">
<div id="sp">
<div id="sb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt.
And so on ...
</div>
<div id="act">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt.
And so on ...
</div>
</div>
</div>
<footer> </footer>
</body>
and the CSS:
#charset"utf-8";
html {
height: 100%;
}
body {
background-color: #d1cdc7;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Tahoma, Geneva, sans-serif;
height: 100%;
}
#main {
bottom: 0px;
left: 5%;
margin-bottom: 0px;
margin-top: 20px;
max-width: 1920px;
min-width: 820px;
overflow: visible;
position: fixed;
right: 5%;
top: 10px;
}
#main #sp {
overflow: visible;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
padding: 5px;
height: 100%;
}
#main #sp #sb {
background-color: #F8F6F2;
float: left;
width: 28%;
margin-right: 2%;
overflow: auto;
padding: 1%;
height: 100%;
}
#main #sp #act {
background-color: #F8F6F2;
float: left;
width: 66%;
overflow: auto;
padding: 1%;
height: 100%;
}
#footpad {
height: 30px;
clear: both;
}
footer {
background-color: #E1E1E1;
position: fixed;
height: 27px;
width: 100%;
bottom: 0px;
}
... and the code in action on JSFiddle.
Can someone explain what's wrong?
To fix the footer problem in the css file under
#main {
bottom: 80px; <--- use to be 0.... you can change it to whatever you want
left: 5%;
margin-bottom: 0px;
margin-top: 20px;
max-width: 1920px;
min-width: 820px;
overflow: visible;
position: fixed;
right: 5%;
top: 10px;
}
I changed the bottom to no be the same as the footer so they don't stack. I don't know if that was the problem or not.
Add this code to the very top of the css file as a reset this might fix the problem with it not working in your browser.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Add padding-bottom:100px; to #main
Fiddle
Copy-Paste the entire code below
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#charset"utf-8";
html {
height: 100%;
}
body {
background-color: #d1cdc7;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Tahoma, Geneva, sans-serif;
height: 100%;
}
#main {
bottom: 0px;
left: 5%;
margin-bottom: 0px;
margin-top: 20px;
max-width: 1920px;
min-width: 820px;
overflow: visible;
position: fixed;
right: 5%;
top: 10px;
padding-bottom:100px;
}
#main #sp {
overflow: visible;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
padding: 5px;
height: 100%;
}
#main #sp #sb {
background-color: #F8F6F2;
float: left;
width: 28%;
margin-right: 2%;
overflow: auto;
padding: 1%;
height: 100%;
}
#main #sp #act {
background-color: #F8F6F2;
float: left;
width: 66%;
overflow: auto;
padding: 1%;
height: 100%;
}
footer {
background-color: #000;
position: fixed;
height: 27px;
width: 100%;
bottom: 0px;
}
</style>
</head>
<body>
<div id="main">
<div id="sp">
<div id="sb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt. Suspendisse lacus purus, ornare nec augue sit amet, pulvinar malesuada metus. Morbi fringilla tempor ante quis elementum. In tempor odio arcu, vel suscipit metus mattis ac. Sed ac nulla ac lacus faucibus hendrerit. Etiam velit urna, pulvinar quis erat ac, cursus convallis lacus. Mauris non convallis orci, nec congue urna. Sed ac diam vitae erat porta viverra id nec tellus. Aliquam blandit nibh sed eros sollicitudin, ac ornare dui sagittis. Etiam semper, neque luctus feugiat facilisis, felis mi hendrerit augue, ut feugiat orci tellus vitae dui. Aenean ullamcorper consectetur quam sed dictum. Nam viverra elit lorem, sed eleifend augue interdum sit amet. Maecenas lacinia lectus eget vulputate tristique. Cras eget quam eu libero fringilla tincidunt. Aenean at nibh eget lacus vestibulum tristique ac sit amet nunc. Integer at vulputate neque, ut tempus purus. Etiam ac nunc odio. Aliquam tellus est, adipiscing sit amet enim vel, luctus egestas eros. Morbi in accumsan diam, nec commodo neque. Curabitur at nisl non magna venenatis vehicula. Duis non sagittis mauris, et fermentum nunc. Integer sapien nisi, mollis commodo pellentesque eu, rutrum volutpat ipsum. Etiam non scelerisque ligula. Donec iaculis lorem lorem, quis porttitor velit molestie eget. Nunc mollis nibh nec ipsum tincidunt, vel lobortis erat mattis. Suspendisse leo libero, blandit sit amet turpis non, tincidunt egestas nunc. Integer venenatis lectus justo, a sodales odio auctor ut. Morbi purus sem, rhoncus id magna non, eleifend blandit urna. Fusce bibendum augue non nisl aliquet ultricies. Praesent tincidunt lacus quis velit cursus, quis egestas nunc pretium. Pellentesque eu est ultricies, molestie lacus eget, consectetur erat. Nullam condimentum fringilla tempor. Morbi a pellentesque turpis. Curabitur ut elit nulla. Nam vitae sodales enim, vel dignissim nisl. Donec convallis pharetra sem consectetur molestie. Nulla semper ultrices neque non blandit. Pellentesque eget justo leo. Sed consectetur porttitor metus, vel fringilla sapien adipiscing ac. Pellentesque vel risus posuere, dapibus leo varius, fermentum arcu. Nulla in ligula luctus, molestie ligula vel, interdum est. Donec sed erat dolor. Sed cursus suscipit purus, ut eleifend enim vestibulum sit amet. Morbi elit felis, ornare vitae tellus ut, commodo ullamcorper leo. Cras faucibus, est quis vehicula blandit, tortor ante viverra tellus, at tristique metus erat eget lorem. Vivamus et auctor massa, ac commodo massa. Vestibulum magna mi, auctor nec ultrices ullamcorper, auctor sit amet urna. Nulla facilisi. Fusce purus libero, elementum nec ultricies molestie, pharetra at magna. Cras posuere dui in venenatis dignissim. Donec cursus augue eget lacus mattis, iaculis rutrum elit aliquet. Sed commodo, elit sit amet laoreet laoreet, est nunc euismod sem, eu consequat lorem lacus eget urna. In pharetra velit mauris, non vulputate odio sagittis a. Integer non vulputate velit. Nunc sed tellus molestie, egestas risus eget, pretium eros. Etiam vestibulum eget mauris a hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at ipsum eu quam tincidunt dignissim. Etiam egestas eget orci non commodo. In hac habitasse platea dictumst. Fusce semper aliquam dui, vehicula fringilla metus porttitor at. Curabitur mollis non tortor non hendrerit. Morbi ut nibh ut libero ultricies bibendum. Donec varius tincidunt tincidunt. Etiam bibendum consequat felis quis fermentum. Vivamus viverra varius urna a semper. Cras id mi velit. Aenean vitae nunc ullamcorper, sodales arcu ac, vehicula dolor. Proin dignissim ut odio pellentesque lobortis. Cras fermentum placerat arcu sed eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam sagittis urna eget dui tristique, eu dapibus justo pretium. Vestibulum tincidunt ante sed dictum feugiat. Praesent rhoncus quam a nunc pharetra ultricies. Quisque ac dictum massa, non consequat diam. Suspendisse iaculis ornare tortor volutpat malesuada. Curabitur non sollicitudin nunc, a congue lorem. Vivamus sed hendrerit dui. Phasellus eu libero gravida, eleifend est a, convallis orci. Integer aliquam, tortor vitae semper pretium, justo purus accumsan metus, sit amet vestibulum nisi orci at arcu. Vivamus eu nulla vel leo laoreet aliquet. Quisque at enim eros. Mauris pulvinar dictum felis, aliquet vestibulum odio cursus vitae. Proin diam nulla, condimentum non condimentum a, accumsan vitae felis. In hac habitasse platea dictumst. Curabitur nisl magna, viverra ac vestibulum semper, faucibus fermentum eros. Nunc a gravida eros, et imperdiet arcu. Nunc sit amet sagittis est. In ullamcorper fermentum lorem, vel hendrerit libero auctor nec. Suspendisse in lectus adipiscing, elementum felis vitae, tincidunt mi. Nunc tincidunt eros nisi, in ullamcorper metus dapibus nec. Vestibulum luctus risus ac nisl tincidunt scelerisque. Suspendisse volutpat velit tortor, eget auctor odio placerat at. Suspendisse tristique ligula ullamcorper massa venenatis cursus. Nunc sagittis enim eu feugiat suscipit. Suspendisse accumsan, augue vulputate placerat porta, dolor nulla sodales enim, a bibendum velit ipsum quis elit. Aliquam erat volutpat. Nam sed tempor eros. Suspendisse cursus enim nec dui bibendum, ut pellentesque urna adipiscing. Etiam sit amet eros ac massa sodales sagittis. Mauris eget tristique sapien. Maecenas felis dui, luctus quis dictum nec, scelerisque vel est. Vestibulum tristique velit ac ante viverra, eget malesuada nisl faucibus. Etiam consequat felis mi, et porta sapien faucibus id. Vivamus a mollis metus. Proin dapibus sollicitudin consequat. Pellentesque eu sollicitudin magna. Donec ac magna pretium, gravida mauris eget, egestas nulla. Pellentesque in hendrerit nunc. Sed vitae massa luctus, ultricies nisl eu, tincidunt nunc. Donec gravida mattis consequat. Cras quis sem molestie, faucibus dolor id, pretium mauris. Morbi sit amet leo sed leo tincidunt ultrices. Sed enim purus, adipiscing ut nisl vitae, accumsan scelerisque ipsum. Cras vitae felis lacus.
THIS IS THE LAST LINE.
</div>
<div id="act">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt. Suspendisse lacus purus, ornare nec augue sit amet, pulvinar malesuada metus. Morbi fringilla tempor ante quis elementum. In tempor odio arcu, vel suscipit metus mattis ac. Sed ac nulla ac lacus faucibus hendrerit. Etiam velit urna, pulvinar quis erat ac, cursus convallis lacus. Mauris non convallis orci, nec congue urna. Sed ac diam vitae erat porta viverra id nec tellus. Aliquam blandit nibh sed eros sollicitudin, ac ornare dui sagittis. Etiam semper, neque luctus feugiat facilisis, felis mi hendrerit augue, ut feugiat orci tellus vitae dui. Aenean ullamcorper consectetur quam sed dictum. Nam viverra elit lorem, sed eleifend augue interdum sit amet. Maecenas lacinia lectus eget vulputate tristique. Cras eget quam eu libero fringilla tincidunt. Aenean at nibh eget lacus vestibulum tristique ac sit amet nunc. Integer at vulputate neque, ut tempus purus. Etiam ac nunc odio. Aliquam tellus est, adipiscing sit amet enim vel, luctus egestas eros. Morbi in accumsan diam, nec commodo neque. Curabitur at nisl non magna venenatis vehicula. Duis non sagittis mauris, et fermentum nunc. Integer sapien nisi, mollis commodo pellentesque eu, rutrum volutpat ipsum. Etiam non scelerisque ligula. Donec iaculis lorem lorem, quis porttitor velit molestie eget. Nunc mollis nibh nec ipsum tincidunt, vel lobortis erat mattis. Suspendisse leo libero, blandit sit amet turpis non, tincidunt egestas nunc. Integer venenatis lectus justo, a sodales odio auctor ut. Morbi purus sem, rhoncus id magna non, eleifend blandit urna. Fusce bibendum augue non nisl aliquet ultricies. Praesent tincidunt lacus quis velit cursus, quis egestas nunc pretium. Pellentesque eu est ultricies, molestie lacus eget, consectetur erat. Nullam condimentum fringilla tempor. Morbi a pellentesque turpis. Curabitur ut elit nulla. Nam vitae sodales enim, vel dignissim nisl. Donec convallis pharetra sem consectetur molestie. Nulla semper ultrices neque non blandit. Pellentesque eget justo leo. Sed consectetur porttitor metus, vel fringilla sapien adipiscing ac. Pellentesque vel risus posuere, dapibus leo varius, fermentum arcu. Nulla in ligula luctus, molestie ligula vel, interdum est. Donec sed erat dolor. Sed cursus suscipit purus, ut eleifend enim vestibulum sit amet. Morbi elit felis, ornare vitae tellus ut, commodo ullamcorper leo. Cras faucibus, est quis vehicula blandit, tortor ante viverra tellus, at tristique metus erat eget lorem. Vivamus et auctor massa, ac commodo massa. Vestibulum magna mi, auctor nec ultrices ullamcorper, auctor sit amet urna. Nulla facilisi. Fusce purus libero, elementum nec ultricies molestie, pharetra at magna. Cras posuere dui in venenatis dignissim. Donec cursus augue eget lacus mattis, iaculis rutrum elit aliquet. Sed commodo, elit sit amet laoreet laoreet, est nunc euismod sem, eu consequat lorem lacus eget urna. In pharetra velit mauris, non vulputate odio sagittis a. Integer non vulputate velit. Nunc sed tellus molestie, egestas risus eget, pretium eros. Etiam vestibulum eget mauris a hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at ipsum eu quam tincidunt dignissim. Etiam egestas eget orci non commodo. In hac habitasse platea dictumst. Fusce semper aliquam dui, vehicula fringilla metus porttitor at. Curabitur mollis non tortor non hendrerit. Morbi ut nibh ut libero ultricies bibendum. Donec varius tincidunt tincidunt. Etiam bibendum consequat felis quis fermentum. Vivamus viverra varius urna a semper. Cras id mi velit. Aenean vitae nunc ullamcorper, sodales arcu ac, vehicula dolor. Proin dignissim ut odio pellentesque lobortis. Cras fermentum placerat arcu sed eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam sagittis urna eget dui tristique, eu dapibus justo pretium. Vestibulum tincidunt ante sed dictum feugiat. Praesent rhoncus quam a nunc pharetra ultricies. Quisque ac dictum massa, non consequat diam. Suspendisse iaculis ornare tortor volutpat malesuada. Curabitur non sollicitudin nunc, a congue lorem. Vivamus sed hendrerit dui. Phasellus eu libero gravida, eleifend est a, convallis orci. Integer aliquam, tortor vitae semper pretium, justo purus accumsan metus, sit amet vestibulum nisi orci at arcu. Vivamus eu nulla vel leo laoreet aliquet. Quisque at enim eros. Mauris pulvinar dictum felis, aliquet vestibulum odio cursus vitae. Proin diam nulla, condimentum non condimentum a, accumsan vitae felis. In hac habitasse platea dictumst. Curabitur nisl magna, viverra ac vestibulum semper, faucibus fermentum eros. Nunc a gravida eros, et imperdiet arcu. Nunc sit amet sagittis est. In ullamcorper fermentum lorem, vel hendrerit libero auctor nec. Suspendisse in lectus adipiscing, elementum felis vitae, tincidunt mi. Nunc tincidunt eros nisi, in ullamcorper metus dapibus nec. Vestibulum luctus risus ac nisl tincidunt scelerisque. Suspendisse volutpat velit tortor, eget auctor odio placerat at. Suspendisse tristique ligula ullamcorper massa venenatis cursus. Nunc sagittis enim eu feugiat suscipit. Suspendisse accumsan, augue vulputate placerat porta, dolor nulla sodales enim, a bibendum velit ipsum quis elit. Aliquam erat volutpat. Nam sed tempor eros. Suspendisse cursus enim nec dui bibendum, ut pellentesque urna adipiscing. Etiam sit amet eros ac massa sodales sagittis. Mauris eget tristique sapien. Maecenas felis dui, luctus quis dictum nec, scelerisque vel est. Vestibulum tristique velit ac ante viverra, eget malesuada nisl faucibus. Etiam consequat felis mi, et porta sapien faucibus id. Vivamus a mollis metus. Proin dapibus sollicitudin consequat. Pellentesque eu sollicitudin magna. Donec ac magna pretium, gravida mauris eget, egestas nulla. Pellentesque in hendrerit nunc. Sed vitae massa luctus, ultricies nisl eu, tincidunt nunc. Donec gravida mattis consequat. Cras quis sem molestie, faucibus dolor id, pretium mauris. Morbi sit amet leo sed leo tincidunt ultrices. Sed enim purus, adipiscing ut nisl vitae, accumsan scelerisque ipsum. Cras vitae felis lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt. Suspendisse lacus purus, ornare nec augue sit amet, pulvinar malesuada metus. Morbi fringilla tempor ante quis elementum. In tempor odio arcu, vel suscipit metus mattis ac. Sed ac nulla ac lacus faucibus hendrerit. Etiam velit urna, pulvinar quis erat ac, cursus convallis lacus. Mauris non convallis orci, nec congue urna. Sed ac diam vitae erat porta viverra id nec tellus. Aliquam blandit nibh sed eros sollicitudin, ac ornare dui sagittis. Etiam semper, neque luctus feugiat facilisis, felis mi hendrerit augue, ut feugiat orci tellus vitae dui. Aenean ullamcorper consectetur quam sed dictum. Nam viverra elit lorem, sed eleifend augue interdum sit amet. Maecenas lacinia lectus eget vulputate tristique. Cras eget quam eu libero fringilla tincidunt. Aenean at nibh eget lacus vestibulum tristique ac sit amet nunc. Integer at vulputate neque, ut tempus purus. Etiam ac nunc odio. Aliquam tellus est, adipiscing sit amet enim vel, luctus egestas eros. Morbi in accumsan diam, nec commodo neque. Curabitur at nisl non magna venenatis vehicula. Duis non sagittis mauris, et fermentum nunc. Integer sapien nisi, mollis commodo pellentesque eu, rutrum volutpat ipsum. Etiam non scelerisque ligula. Donec iaculis lorem lorem, quis porttitor velit molestie eget. Nunc mollis nibh nec ipsum tincidunt, vel lobortis erat mattis. Suspendisse leo libero, blandit sit amet turpis non, tincidunt egestas nunc. Integer venenatis lectus justo, a sodales odio auctor ut. Morbi purus sem, rhoncus id magna non, eleifend blandit urna. Fusce bibendum augue non nisl aliquet ultricies. Praesent tincidunt lacus quis velit cursus, quis egestas nunc pretium. Pellentesque eu est ultricies, molestie lacus eget, consectetur erat. Nullam condimentum fringilla tempor. Morbi a pellentesque turpis. Curabitur ut elit nulla. Nam vitae sodales enim, vel dignissim nisl. Donec convallis pharetra sem consectetur molestie. Nulla semper ultrices neque non blandit. Pellentesque eget justo leo. Sed consectetur porttitor metus, vel fringilla sapien adipiscing ac. Pellentesque vel risus posuere, dapibus leo varius, fermentum arcu. Nulla in ligula luctus, molestie ligula vel, interdum est. Donec sed erat dolor. Sed cursus suscipit purus, ut eleifend enim vestibulum sit amet. Morbi elit felis, ornare vitae tellus ut, commodo ullamcorper leo. Cras faucibus, est quis vehicula blandit, tortor ante viverra tellus, at tristique metus erat eget lorem. Vivamus et auctor massa, ac commodo massa. Vestibulum magna mi, auctor nec ultrices ullamcorper, auctor sit amet urna. Nulla facilisi. Fusce purus libero, elementum nec ultricies molestie, pharetra at magna. Cras posuere dui in venenatis dignissim. Donec cursus augue eget lacus mattis, iaculis rutrum elit aliquet. Sed commodo, elit sit amet laoreet laoreet, est nunc euismod sem, eu consequat lorem lacus eget urna. In pharetra velit mauris, non vulputate odio sagittis a. Integer non vulputate velit. Nunc sed tellus molestie, egestas risus eget, pretium eros. Etiam vestibulum eget mauris a hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at ipsum eu quam tincidunt dignissim. Etiam egestas eget orci non commodo. In hac habitasse platea dictumst. Fusce semper aliquam dui, vehicula fringilla metus porttitor at. Curabitur mollis non tortor non hendrerit. Morbi ut nibh ut libero ultricies bibendum. Donec varius tincidunt tincidunt. Etiam bibendum consequat felis quis fermentum. Vivamus viverra varius urna a semper. Cras id mi velit. Aenean vitae nunc ullamcorper, sodales arcu ac, vehicula dolor. Proin dignissim ut odio pellentesque lobortis. Cras fermentum placerat arcu sed eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam sagittis urna eget dui tristique, eu dapibus justo pretium. Vestibulum tincidunt ante sed dictum feugiat. Praesent rhoncus quam a nunc pharetra ultricies. Quisque ac dictum massa, non consequat diam. Suspendisse iaculis ornare tortor volutpat malesuada. Curabitur non sollicitudin nunc, a congue lorem. Vivamus sed hendrerit dui. Phasellus eu libero gravida, eleifend est a, convallis orci. Integer aliquam, tortor vitae semper pretium, justo purus accumsan metus, sit amet vestibulum nisi orci at arcu. Vivamus eu nulla vel leo laoreet aliquet. Quisque at enim eros. Mauris pulvinar dictum felis, aliquet vestibulum odio cursus vitae. Proin diam nulla, condimentum non condimentum a, accumsan vitae felis. In hac habitasse platea dictumst. Curabitur nisl magna, viverra ac vestibulum semper, faucibus fermentum eros. Nunc a gravida eros, et imperdiet arcu. Nunc sit amet sagittis est. In ullamcorper fermentum lorem, vel hendrerit libero auctor nec. Suspendisse in lectus adipiscing, elementum felis vitae, tincidunt mi. Nunc tincidunt eros nisi, in ullamcorper metus dapibus nec. Vestibulum luctus risus ac nisl tincidunt scelerisque. Suspendisse volutpat velit tortor, eget auctor odio placerat at. Suspendisse tristique ligula ullamcorper massa venenatis cursus. Nunc sagittis enim eu feugiat suscipit. Suspendisse accumsan, augue vulputate placerat porta, dolor nulla sodales enim, a bibendum velit ipsum quis elit. Aliquam erat volutpat. Nam sed tempor eros. Suspendisse cursus enim nec dui bibendum, ut pellentesque urna adipiscing. Etiam sit amet eros ac massa sodales sagittis. Mauris eget tristique sapien. Maecenas felis dui, luctus quis dictum nec, scelerisque vel est. Vestibulum tristique velit ac ante viverra, eget malesuada nisl faucibus. Etiam consequat felis mi, et porta sapien faucibus id. Vivamus a mollis metus. Proin dapibus sollicitudin consequat. Pellentesque eu sollicitudin magna. Donec ac magna pretium, gravida mauris eget, egestas nulla. Pellentesque in hendrerit nunc. Sed vitae massa luctus, ultricies nisl eu, tincidunt nunc. Donec gravida mattis consequat. Cras quis sem molestie, faucibus dolor id, pretium mauris. Morbi sit amet leo sed leo tincidunt ultrices. Sed enim purus, adipiscing ut nisl vitae, accumsan scelerisque ipsum. Cras vitae felis lacus.
THIS IS THE LAST LINE.
</div>
</div>
</div>
<footer> </footer>
</body>
</html>