Usually the sticky footer is not an issue for me but today it's a bit frustrating. I've tried various resources on here as well as just searching and I cannot figure out what is wrong with my footer. If anyone can help me figure this out that would be very much appreciated! Thank you!
html {
height: 100%;
}
body {
background: url('footer_lodyas.png') fixed;
font-family: 'Sahitya', serif;
max-width: 100%;
margin: 0 auto 0 auto;
overflow-x: hidden;
height: 100%;
}
.all {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#footer_links {
position: relative;
width: 100%;
text-align: center;
background: #1FA0A3;
font-size: 16px;
font-size: 1.6rem;
border-top: none;
padding: 20px;
}
<body>
<div class="all">
<div class="wrapall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
</p>
<div id="footer_links"></div>
</div>
</div>
</body>
Try putting your footer div outside .all and .wrapall. Like this: https://jsfiddle.net/fb3uno9s/
html {
height:100%;
}
body{
background: url('footer_lodyas.png') fixed ;
font-family: 'Sahitya', serif;
max-width:100%;
margin: 0 auto 0 auto;
overflow-x: hidden;
height: 100%;
}
.all{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#footer_links {
position: relative;
width: 100%;
text-align: center;
background: #1FA0A3;
font-size: 16px;
font-size: 1.6rem;
border-top: none;
padding:20px;
}
<div class="all">
<div class="wrapall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta.
Integer semper condimentum tellus ac accumsan. Integer scelerisque, diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus.
Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis.
Vestibulum tristique magna ac lobortis pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl.
Proin eleifend ac lacus sed venenatis. Vivamus pulvinar commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
</p>
</div>
</div>
<div id="footer_links"></div>
You can use display: flex; to achieve sticky footer. I can't see any efforts for getting sticky footer in your code.
.wrapall {
display: flex;
flex-direction: column;
height: 100%;
}
.wrapall p {
flex: 1;
}
html {
height: 100%;
}
body {
background: url('footer_lodyas.png') fixed;
font-family: 'Sahitya', serif;
max-width: 100%;
margin: 0 auto 0 auto;
overflow-x: hidden;
height: 100%;
}
.all {
min-height: 100%;
height: 100%;
margin: 0 auto;
}
.wrapall {
display: flex;
flex-direction: column;
height: 100%;
}
.wrapall p {
flex: 1;
}
#footer_links {
position: relative;
width: 100%;
text-align: center;
background: #1FA0A3;
font-size: 16px;
font-size: 1.6rem;
border-top: none;
padding: 20px;
}
<body>
<div class="all">
<div class="wrapall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
</p>
<div id="footer_links">
</div>
</div>
</div>
</body>
Try this: use vh - viewport height
.wrapall {
height: 100vh;
position: relative;
}
#footer_links {
background: #1fa0a3 none repeat scroll 0 0;
border-top: medium none;
bottom: 0;
font-size: 1.6rem;
padding: 20px;
position: absolute;
text-align: center;
width: 100%;
}
Related
I have recently started to learn programming, maybe someone can help me? Please
My problem: I would like to write a website where only the middle part of the site is scrolling and the top, left and right sides remain in place. Is it possible to do this not very complicated?
Web-page examples: https://dominos.ua/uk/kyiv/ (the top of the page is fixed)
https://news.google.com/ (the top of the page + the left side of the page are fixed)
Also, here is my code so far (maybe it can help):
.middlepane {
width: 50%;
height: 100%;
float: left;
background-color: #c6e5f3;
border-collapse: collapse;
}
.rightpane {
width: 25%;
height: 100%;
float: right;
background-color: #084a83;
border-collapse: collapse;
}
.toppane {
width: 100%;
height: 100px;
border-collapse: collapse;
background-color: #ffffe7;
align-items: center;
}
.leftpane {
width: 25%;
height: 100%;
float: left;
background-color: #084a83;
border-collapse: collapse;
I would advice learning how to use flexbox. Here's an article that explains how to do it.
body {
overflow: hidden;
height: 100vh;
}
main {
overflow-y: auto;
}
ul {
list-style: none;
}
li {
color: #fff;
}
aside {
border-right: 1px solid #ededed;
background: #36c;
flex: 1 0 10%;
padding: 1rem;
}
.wrapper {
display: flex;
height: 100%;
}
#media (max-width: 500px) {
.wrapper {
flex-direction: column-reverse;
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.wrapper_inner {
width: 90%;
margin: 0px auto;
}
<body>
<div class="wrapper">
<aside>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</aside>
<main>
<div class="wrapper_inner">
<p>
Non enim praesent elementum facilisis. Facilisis volutpat est velit egestas dui id ornare. Lobortis mattis aliquam faucibus purus. Volutpat consequat mauris nunc congue nisi vitae. Quis auctor elit sed vulputate. Nisl nisi scelerisque eu ultrices vitae auctor eu. Imperdiet sed euismod nisi porta lorem. Sed faucibus turpis in eu mi bibendum neque. Id eu nisl nunc mi. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
</p>
<p>
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
</p>
</div>
</main>
<aside>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</aside>
</div>
</body>
I am working out of "HTML5 and CSS5 Illustrated Complete" Second Edition by Sasha Vodnik.
I did the initial Unit D example to a Tee, however logo styling and the positioning aren't applying correctly or at all.
/*
Lakeland Reeds Bed and Breakfast style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
*/
/* reset styles */
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
/* body and page container */
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 6.2em;
}
/* headings */
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
}
h1 {
padding: 0.4em;
color: white;
text-align: center;
}
h2 {
padding: 0.4em 0.6em;
}
p.logo {
padding: 0.2em;
border: 2px solid beige;
color: goldenrod;
position: absolute;
top: 2em;
left: 2em;
}
/* main content */
article {
width: 70%;
float: right;
top: 6.2em;
}
article p {
padding: 0 1em 1em;
}
/* sidebar */
aside {
width: 30%;
padding: 1em 0;
background-color: goldenrod;
}
aside p {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 0.4em 0;
margin: 0 0.6em;
}
/* footer section */
footer {
padding: 0.6em;
color: white;
background-color: darkgreen;
text-align: center;
clear: right;
}
footer p {
margin: 0.4em;
}
footer p.accent {
color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lakeland Reeds Bed & Breakfast - Test Page</title>
<!--
Lakeland Reeds Bed & Breakfast test page
Filename: longpage.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Lakeland Reeds<br>Bed & Breakfast</h1>
<p class=”logo”>ℒℛ</p>
</header>
<article>
<h2>Test Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra ullamcorper ultrices. Morbi egestas elementum ligula, eget congue elit pulvinar placerat. Curabitur dictum, velit et iaculis mattis, felis ante sodales lectus, consectetur convallis enim urna ut libero. Suspendisse placerat dignissim quam, et consequat ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id dolor ut nulla sodales lobortis in ac dolor. Maecenas bibendum eleifend lacus, maximus dignissim mi fermentum quis. Suspendisse sagittis tincidunt pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nunc velit, molestie nec metus vel, dictum rutrum est. Aliquam volutpat ex massa, tempus eleifend nisl eleifend sed. Fusce egestas cursus felis in fermentum. Mauris facilisis feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec feugiat erat nec sapien tincidunt congue. Etiam urna libero, aliquet ut neque a, vulputate fermentum velit.</p>
<p>Nullam vel enim luctus, imperdiet neque et, aliquet turpis. Morbi a rhoncus metus. Nulla facilisi. Nunc tincidunt vel eros id laoreet. Fusce id nibh rhoncus, porta nulla nec, euismod ligula. Phasellus bibendum mi lectus. Donec a egestas mauris.</p>
<p>Curabitur et sapien consequat, varius diam in, viverra massa. Aliquam erat volutpat. Vestibulum facilisis urna elit, vel malesuada mauris pulvinar vitae. In ultrices tortor nisl, et faucibus ex dignissim non. Vivamus eget risus tempus, rutrum ipsum sit amet, gravida mi. Vestibulum et lobortis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec ultricies risus quis metus cursus, in feugiat quam ultricies. Nullam sit amet enim in tellus molestie sodales et et leo. Duis pulvinar venenatis consequat. Aenean facilisis arcu libero, a auctor odio feugiat at. Donec sagittis sollicitudin maximus. Maecenas elementum, lectus vitae fringilla tempus, mi nibh faucibus sapien, in fermentum dui massa vel dui. Nullam sed ligula scelerisque, viverra quam sit amet, bibendum libero. Duis at fermentum dolor. Phasellus non dictum nulla. Morbi a semper nibh. Vivamus ullamcorper purus ac nisi consectetur bibendum. Nulla varius sodales tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur imperdiet neque nec purus pellentesque, vitae convallis libero accumsan. Praesent semper lacus in tellus eleifend, et tristique lorem egestas.</p>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
<p>Aenean eu ipsum eros. Aenean faucibus sollicitudin mi, vel ullamcorper nisi porttitor a. Suspendisse potenti. Mauris facilisis eu neque id dignissim. Pellentesque nunc enim, feugiat ac orci vel, bibendum tincidunt sem. Vivamus placerat finibus ultricies. Curabitur ac fringilla diam.</p>
<p>Integer mi nibh, accumsan fringilla consectetur eu, scelerisque nec ipsum. Nullam in bibendum risus. Integer fringilla enim ac diam sollicitudin, eget elementum odio accumsan. Aliquam efficitur congue ante volutpat lacinia. Nam et ante eu arcu bibendum mollis. Morbi elementum mauris tristique ullamcorper dictum. Vestibulum ultrices, nibh vel tristique lacinia, massa orci feugiat nisi, nec mattis libero sem sit amet sem. Curabitur in leo quis sapien porta blandit sit amet sed felis. Proin et diam nisi. Sed quis sapien quis lectus molestie imperdiet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam euismod arcu molestie, congue felis non, placerat lacus. Proin semper nisi non posuere porttitor. Donec turpis ipsum, tincidunt in pellentesque in, accumsan at ipsum. Fusce rhoncus auctor sem sed fringilla. Sed sodales lorem rhoncus nunc blandit vestibulum. Vestibulum convallis egestas maximus. Donec porta velit ipsum, porttitor condimentum ipsum cursus nec. In hac habitasse platea dictumst. In volutpat gravida iaculis. In porttitor mattis eros, et feugiat lectus pulvinar ut. Vestibulum vel libero at justo posuere tristique et in mauris. Duis condimentum lacinia luctus. Mauris ut cursus lacus, pellentesque efficitur metus. Nunc gravida, ex cursus commodo hendrerit, arcu metus scelerisque ligula, eu lacinia felis massa blandit diam. Pellentesque ac consequat est.</p>
<p>Cras volutpat vitae ipsum non molestie. Aliquam id risus quam. Aenean malesuada dui sed est suscipit varius. Morbi maximus diam luctus tempus mattis. In sit amet pulvinar eros, non imperdiet neque. Nullam suscipit tortor risus, pellentesque molestie tortor pharetra vel. Proin quis malesuada lacus. Sed pharetra scelerisque leo. Praesent accumsan at ipsum eu rutrum. Nam fermentum velit quis arcu ullamcorper maximus. Pellentesque blandit vehicula libero, eget sagittis est imperdiet et. Curabitur nisl eros, consequat vel tellus vehicula, pulvinar porta tellus.</p>
<p>Integer porttitor placerat fringilla. Proin eleifend in nulla in commodo. Etiam a dictum dui. Aliquam faucibus massa in lacinia fermentum. Nunc placerat condimentum tortor, sit amet varius mauris pretium quis. In non arcu dolor. Praesent venenatis sed sem eleifend consectetur. In ex mi, vestibulum non interdum et, luctus vel sem. Duis eu diam a tellus bibendum elementum.</p>
<p>Praesent condimentum sem eget magna consequat, eget gravida libero elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a posuere metus. Nullam tellus justo, venenatis sit amet arcu eu, venenatis vulputate neque. Etiam vestibulum orci quis mauris lacinia, et blandit arcu imperdiet. Vestibulum aliquam scelerisque justo, tincidunt congue orci convallis a. Ut facilisis arcu non orci interdum, sit amet facilisis mi consequat. Cras sed venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pharetra a sapien non ultrices. Donec finibus nulla quis purus ullamcorper, sit amet accumsan sem blandit. Ut tempus justo quis nulla viverra iaculis. In placerat turpis sit amet quam tincidunt, eget lobortis dui imperdiet. Fusce a malesuada ligula, et dapibus dolor. Maecenas euismod dui nec mauris fermentum fringilla.</p>
<p>Mauris dui lectus, luctus et auctor mollis, luctus fringilla dui. Duis pharetra massa id arcu imperdiet mollis. Nam ornare efficitur gravida. Sed ultrices nibh nisi, ut maximus purus aliquam et. In dignissim ut tortor nec tincidunt. Sed tellus arcu, posuere vitae nulla eu, pellentesque feugiat mi. Phasellus lectus enim, tincidunt nec dui eu, congue egestas augue.</p>
<p>Praesent eget purus suscipit, placerat purus ac, lacinia metus. Curabitur placerat facilisis augue, non sagittis ipsum dictum et. Mauris luctus et risus vel laoreet. Maecenas tempor ipsum a massa gravida auctor. Nunc nec massa sed urna aliquet posuere ut nec augue. Integer lacus nisi, ultricies at neque id, vestibulum suscipit lorem. Vestibulum efficitur arcu vitae magna bibendum gravida. Ut purus lorem, vestibulum quis ipsum eu, efficitur suscipit ligula. Sed nec urna libero. Pellentesque ullamcorper turpis non ullamcorper pulvinar. Nullam vestibulum, dui a congue venenatis, nibh sem tempus urna, non dapibus ligula orci et diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis lobortis est, eget convallis est cursus at. Ut id ullamcorper dolor.</p>
<p>Sed nisl lorem, sodales sed pretium et, consectetur sollicitudin mi. Etiam sed urna tempor, fermentum sapien ut, euismod nisi. Aliquam erat volutpat. Phasellus at ipsum ut odio convallis molestie. Integer ultricies ornare leo ac tempus. Mauris accumsan bibendum dapibus. Integer quis nunc vitae mauris eleifend dictum ut non velit. Aliquam non lacus ut tellus fringilla auctor. Donec et pellentesque dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum semper maximus lacus, a hendrerit erat. Quisque felis magna, tincidunt eu enim non, consequat pharetra nunc. Pellentesque sodales nulla eu facilisis venenatis. Vestibulum quis tortor quis sapien tincidunt aliquam nec mattis enim.</p>
<p>Ut eget sagittis erat. Fusce euismod volutpat diam, non semper lorem congue accumsan. Proin malesuada erat id sodales scelerisque. Aliquam non quam ut magna rutrum commodo. Nulla facilisi. Aliquam erat volutpat. Aliquam erat volutpat. Integer a sem eu metus consectetur malesuada rutrum non magna.</p>
</article>
<aside>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
</aside>
<footer>
<p class="accent">Philip Blaine, Proprietor</p>
<p>45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</footer>
</div>
</body>
</html>
A white space appears above where the header should go, which should remain fixed at the top and follow as you scroll without overlap at the beginning. Then the "LR" is not applying any ruling at all.
Add top: 0; to your header in CSS. It should look like this:
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
top: 0;
}
Now you can see that the container has slipped a little. Therefore you could not give the container top: 6.2em; but approx. top: 7.5em;. At the end it should look like this:
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 6.2em;
}
Here is the full code:
/*
Lakeland Reeds Bed and Breakfast style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
*/
/* reset styles */
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
/* body and page container */
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 7.5em;
}
/* headings */
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
top: 0;
}
h1 {
padding: 0.4em;
color: white;
text-align: center;
}
h2 {
padding: 0.4em 0.6em;
}
p.logo {
padding: 0.2em;
border: 2px solid beige;
color: goldenrod;
position: absolute;
top: 2em;
left: 2em;
}
/* main content */
article {
width: 70%;
float: right;
top: 6.2em;
}
article p {
padding: 0 1em 1em;
}
/* sidebar */
aside {
width: 30%;
padding: 1em 0;
background-color: goldenrod;
}
aside p {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 0.4em 0;
margin: 0 0.6em;
}
/* footer section */
footer {
padding: 0.6em;
color: white;
background-color: darkgreen;
text-align: center;
clear: right;
}
footer p {
margin: 0.4em;
}
footer p.accent {
color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lakeland Reeds Bed & Breakfast - Test Page</title>
<!--
Lakeland Reeds Bed & Breakfast test page
Filename: longpage.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Lakeland Reeds<br>Bed & Breakfast</h1>
<p class=”logo”>ℒℛ</p>
</header>
<article>
<h2>Test Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra ullamcorper ultrices. Morbi egestas elementum ligula, eget congue elit pulvinar placerat. Curabitur dictum, velit et iaculis mattis, felis ante sodales lectus, consectetur convallis enim urna ut libero. Suspendisse placerat dignissim quam, et consequat ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id dolor ut nulla sodales lobortis in ac dolor. Maecenas bibendum eleifend lacus, maximus dignissim mi fermentum quis. Suspendisse sagittis tincidunt pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nunc velit, molestie nec metus vel, dictum rutrum est. Aliquam volutpat ex massa, tempus eleifend nisl eleifend sed. Fusce egestas cursus felis in fermentum. Mauris facilisis feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec feugiat erat nec sapien tincidunt congue. Etiam urna libero, aliquet ut neque a, vulputate fermentum velit.</p>
<p>Nullam vel enim luctus, imperdiet neque et, aliquet turpis. Morbi a rhoncus metus. Nulla facilisi. Nunc tincidunt vel eros id laoreet. Fusce id nibh rhoncus, porta nulla nec, euismod ligula. Phasellus bibendum mi lectus. Donec a egestas mauris.</p>
<p>Curabitur et sapien consequat, varius diam in, viverra massa. Aliquam erat volutpat. Vestibulum facilisis urna elit, vel malesuada mauris pulvinar vitae. In ultrices tortor nisl, et faucibus ex dignissim non. Vivamus eget risus tempus, rutrum ipsum sit amet, gravida mi. Vestibulum et lobortis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec ultricies risus quis metus cursus, in feugiat quam ultricies. Nullam sit amet enim in tellus molestie sodales et et leo. Duis pulvinar venenatis consequat. Aenean facilisis arcu libero, a auctor odio feugiat at. Donec sagittis sollicitudin maximus. Maecenas elementum, lectus vitae fringilla tempus, mi nibh faucibus sapien, in fermentum dui massa vel dui. Nullam sed ligula scelerisque, viverra quam sit amet, bibendum libero. Duis at fermentum dolor. Phasellus non dictum nulla. Morbi a semper nibh. Vivamus ullamcorper purus ac nisi consectetur bibendum. Nulla varius sodales tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur imperdiet neque nec purus pellentesque, vitae convallis libero accumsan. Praesent semper lacus in tellus eleifend, et tristique lorem egestas.</p>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
<p>Aenean eu ipsum eros. Aenean faucibus sollicitudin mi, vel ullamcorper nisi porttitor a. Suspendisse potenti. Mauris facilisis eu neque id dignissim. Pellentesque nunc enim, feugiat ac orci vel, bibendum tincidunt sem. Vivamus placerat finibus ultricies. Curabitur ac fringilla diam.</p>
<p>Integer mi nibh, accumsan fringilla consectetur eu, scelerisque nec ipsum. Nullam in bibendum risus. Integer fringilla enim ac diam sollicitudin, eget elementum odio accumsan. Aliquam efficitur congue ante volutpat lacinia. Nam et ante eu arcu bibendum mollis. Morbi elementum mauris tristique ullamcorper dictum. Vestibulum ultrices, nibh vel tristique lacinia, massa orci feugiat nisi, nec mattis libero sem sit amet sem. Curabitur in leo quis sapien porta blandit sit amet sed felis. Proin et diam nisi. Sed quis sapien quis lectus molestie imperdiet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam euismod arcu molestie, congue felis non, placerat lacus. Proin semper nisi non posuere porttitor. Donec turpis ipsum, tincidunt in pellentesque in, accumsan at ipsum. Fusce rhoncus auctor sem sed fringilla. Sed sodales lorem rhoncus nunc blandit vestibulum. Vestibulum convallis egestas maximus. Donec porta velit ipsum, porttitor condimentum ipsum cursus nec. In hac habitasse platea dictumst. In volutpat gravida iaculis. In porttitor mattis eros, et feugiat lectus pulvinar ut. Vestibulum vel libero at justo posuere tristique et in mauris. Duis condimentum lacinia luctus. Mauris ut cursus lacus, pellentesque efficitur metus. Nunc gravida, ex cursus commodo hendrerit, arcu metus scelerisque ligula, eu lacinia felis massa blandit diam. Pellentesque ac consequat est.</p>
<p>Cras volutpat vitae ipsum non molestie. Aliquam id risus quam. Aenean malesuada dui sed est suscipit varius. Morbi maximus diam luctus tempus mattis. In sit amet pulvinar eros, non imperdiet neque. Nullam suscipit tortor risus, pellentesque molestie tortor pharetra vel. Proin quis malesuada lacus. Sed pharetra scelerisque leo. Praesent accumsan at ipsum eu rutrum. Nam fermentum velit quis arcu ullamcorper maximus. Pellentesque blandit vehicula libero, eget sagittis est imperdiet et. Curabitur nisl eros, consequat vel tellus vehicula, pulvinar porta tellus.</p>
<p>Integer porttitor placerat fringilla. Proin eleifend in nulla in commodo. Etiam a dictum dui. Aliquam faucibus massa in lacinia fermentum. Nunc placerat condimentum tortor, sit amet varius mauris pretium quis. In non arcu dolor. Praesent venenatis sed sem eleifend consectetur. In ex mi, vestibulum non interdum et, luctus vel sem. Duis eu diam a tellus bibendum elementum.</p>
<p>Praesent condimentum sem eget magna consequat, eget gravida libero elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a posuere metus. Nullam tellus justo, venenatis sit amet arcu eu, venenatis vulputate neque. Etiam vestibulum orci quis mauris lacinia, et blandit arcu imperdiet. Vestibulum aliquam scelerisque justo, tincidunt congue orci convallis a. Ut facilisis arcu non orci interdum, sit amet facilisis mi consequat. Cras sed venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pharetra a sapien non ultrices. Donec finibus nulla quis purus ullamcorper, sit amet accumsan sem blandit. Ut tempus justo quis nulla viverra iaculis. In placerat turpis sit amet quam tincidunt, eget lobortis dui imperdiet. Fusce a malesuada ligula, et dapibus dolor. Maecenas euismod dui nec mauris fermentum fringilla.</p>
<p>Mauris dui lectus, luctus et auctor mollis, luctus fringilla dui. Duis pharetra massa id arcu imperdiet mollis. Nam ornare efficitur gravida. Sed ultrices nibh nisi, ut maximus purus aliquam et. In dignissim ut tortor nec tincidunt. Sed tellus arcu, posuere vitae nulla eu, pellentesque feugiat mi. Phasellus lectus enim, tincidunt nec dui eu, congue egestas augue.</p>
<p>Praesent eget purus suscipit, placerat purus ac, lacinia metus. Curabitur placerat facilisis augue, non sagittis ipsum dictum et. Mauris luctus et risus vel laoreet. Maecenas tempor ipsum a massa gravida auctor. Nunc nec massa sed urna aliquet posuere ut nec augue. Integer lacus nisi, ultricies at neque id, vestibulum suscipit lorem. Vestibulum efficitur arcu vitae magna bibendum gravida. Ut purus lorem, vestibulum quis ipsum eu, efficitur suscipit ligula. Sed nec urna libero. Pellentesque ullamcorper turpis non ullamcorper pulvinar. Nullam vestibulum, dui a congue venenatis, nibh sem tempus urna, non dapibus ligula orci et diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis lobortis est, eget convallis est cursus at. Ut id ullamcorper dolor.</p>
<p>Sed nisl lorem, sodales sed pretium et, consectetur sollicitudin mi. Etiam sed urna tempor, fermentum sapien ut, euismod nisi. Aliquam erat volutpat. Phasellus at ipsum ut odio convallis molestie. Integer ultricies ornare leo ac tempus. Mauris accumsan bibendum dapibus. Integer quis nunc vitae mauris eleifend dictum ut non velit. Aliquam non lacus ut tellus fringilla auctor. Donec et pellentesque dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum semper maximus lacus, a hendrerit erat. Quisque felis magna, tincidunt eu enim non, consequat pharetra nunc. Pellentesque sodales nulla eu facilisis venenatis. Vestibulum quis tortor quis sapien tincidunt aliquam nec mattis enim.</p>
<p>Ut eget sagittis erat. Fusce euismod volutpat diam, non semper lorem congue accumsan. Proin malesuada erat id sodales scelerisque. Aliquam non quam ut magna rutrum commodo. Nulla facilisi. Aliquam erat volutpat. Aliquam erat volutpat. Integer a sem eu metus consectetur malesuada rutrum non magna.</p>
</article>
<aside>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
</aside>
<footer>
<p class="accent">Philip Blaine, Proprietor</p>
<p>45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</footer>
</div>
</body>
</html>
For some reason when I put content in my "slanted" div containers, the containers aren't growing from the content. I never defined a height so I assumed it would grow with the content.
Does anyone know why this would be happening?
Here is a codepen
HTML
<section class="slant-container">
<div class="slanted first" style="background-color:#2ecc71;">
<div class="unslant">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec nisl arcu. Quisque sed aliquet nisl. Aliquam varius maximus tellus a luctus. Pellentesque malesuada purus vestibulum iaculis tristique. Aliquam eu placerat nulla. In quis lorem in lectus dapibus pretium in non dolor. Proin quis ex rhoncus, bibendum tellus sed, ullamcorper mi. Pellentesque id libero sed mi dignissim iaculis sit amet ac nulla. Fusce gravida risus vitae leo cursus mattis. Pellentesque rhoncus velit vitae lacus hendrerit consectetur. Nulla maximus, lacus nec vestibulum pharetra, massa odio eleifend eros, non pellentesque lectus lectus id eros. Pellentesque id tellus tellus. Integer posuere ligula non mi mollis dapibus. In convallis lorem viverra urna molestie, eget sodales neque fringilla. Sed odio dolor, tincidunt pellentesque congue non, condimentum vitae libero. Praesent ullamcorper efficitur dui, vitae vestibulum nisl ornare id.
Ut laoreet efficitur maximus. Sed cursus, leo at tempor cursus, lectus metus facilisis metus, eu rhoncus magna elit at nulla. Proin sed nulla dolor. Sed non tortor ut tortor dignissim eleifend. Etiam nec egestas lacus. Sed commodo orci a tincidunt imperdiet. Vivamus non ornare tellus, sollicitudin feugiat dolor. Phasellus faucibus massa at diam convallis, quis condimentum nibh rhoncus. Morbi tortor tellus, iaculis ac fermentum vel, fringilla eu dolor. Nam vitae libero lectus. Integer nunc augue, egestas a ullamcorper vel, convallis ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce imperdiet rutrum mauris at fringilla. Nunc lacinia volutpat elit.
Fusce a faucibus neque. Curabitur malesuada urna eu elit egestas, et porta metus cursus. Aenean dignissim condimentum ultricies. Praesent a nisl velit. Vestibulum convallis lorem nec magna pellentesque, ultricies eleifend felis gravida. Morbi dictum dolor eget ex lacinia, sit amet condimentum felis bibendum. Phasellus quis ante eget dolor hendrerit cursus. Integer urna mi, auctor tempor urna a, varius varius justo. Nunc cursus eu neque vitae varius. Nullam tristique convallis blandit.
Donec eget elit iaculis, ultricies nibh sed, tempus sem. Nam ac erat sit amet ligula facilisis ullamcorper ac eu lectus. Aenean hendrerit enim in arcu maximus accumsan et auctor neque. Nunc lorem justo, congue eget ullamcorper malesuada, tincidunt sed ligula. Sed ut ultrices dolor. Donec et tristique lacus. Vivamus sodales euismod fermentum. In enim nibh, imperdiet non posuere at, tristique sit amet sapien. Suspendisse id congue mauris, sagittis pretium sapien. Ut vitae nunc in nisl convallis fermentum. Pellentesque sed aliquet sapien. Vestibulum fringilla, ex eget finibus ultricies, nisi massa rhoncus ex, sed dignissim sapien velit et diam. Morbi ut porta purus. Integer volutpat ante dictum, lobortis ante id, ultricies dolor. Quisque blandit, augue eu vestibulum feugiat, massa tellus dapibus erat, vel ullamcorper magna lorem eu leo.
</div>
</div>
<div class="slanted" style="background-color:#3498db;"></div>
<div class="slanted" style="background-color:#f39c12;"></div>
</div>
<footer></footer>
CSS
* {
margin: 0;
height: 0;
}
.first {
margin-top: -45px;
}
.slanted {
/* height: 300px; */
-webkit-transform: skewy(-3deg);
transform: skewy(-3deg);
padding:75px 25px;
}
.unslant {
-webkit-transform: skewy(3deg);
transform: skewy(3deg);
}
footer {
position: relative;
margin-top: -45px;
height: 150px;
background-color: #bdc3c7;
}
I have a responsive design layout that I am building. In a paragraph tag I have Lorem ipsum. Everything on my responsive design is working as expected except for the fact that when I shrink the box so it satisfies the media query of a max-width of 580px the text overflow: ellipsis doesn't work.
Below is my code:
HTML:
<p id="maincontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non sapien lobortis enim suscipit convallis a eget mi. Duis vitae augue lacus. Donec molestie enim sit amet sollicitudin suscipit. In ac commodo sem, sit amet iaculis neque. Mauris at mi convallis tellus euismod tristique. Aenean et felis sodales, tempor nunc molestie, dictum libero. Praesent et placerat massa. Pellentesque semper tempus maximus. Duis sit amet ornare dolor. Donec pretium tellus et efficitur gravida. Nam vestibulum tellus a nunc egestas tristique. Donec pellentesque id sapien at molestie.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eu enim ipsum. Sed sem enim, semper ac imperdiet a, aliquam in elit. Nullam et commodo massa. Donec tincidunt nulla a lectus imperdiet auctor. Duis sodales eu purus ut lobortis. Donec magna metus, ultricies at nulla ut, congue sollicitudin dui. Aenean scelerisque consectetur elementum. Fusce quis ligula sem. Nunc tincidunt aliquam nisl, sit amet egestas nulla molestie quis.Proin dignissim condimentum erat, eget hendrerit justo rhoncus non. Curabitur et metus velit. Morbi massa massa, lacinia in cursus ac, tincidunt eu metus. Vestibulum gravida dui sed purus aliquet interdum. Nunc eget maximus augue. Mauris non malesuada est. Phasellus maximus varius libero, non facilisis dui bibendum sed. Integer congue est a erat egestas mollis. In sed egestas risus, ac viverra mauris. Pellentesque in mi nec diam ullamcorper ullamcorper in in sem. Aenean lacinia consequat erat, eget auctor augue efficitur in. Etiam a justo quam.Nullam vestibulum iaculis purus sagittis vestibulum. Cras tristique varius est, a consequat nulla interdum id. Nam vitae convallis ipsum. Proin eu odio rhoncus, hendrerit odio id, ornare risus. Aliquam feugiat, velit et sagittis lacinia, nulla est viverra diam, eget euismod mauris nunc ac nibh. Integer pulvinar interdum urna, ut consequat sem varius id. Quisque aliquet ipsum quis leo fringilla, gravida aliquam libero fermentum. Integer tincidunt ut odio at tristique. Fusce in elementum nisl. Etiam pulvinar aliquet lacus a dapibus. Curabitur condimentum mattis nibh. Aliquam erat volutpat. Mauris elementum nisi turpis, vitae mattis purus luctus sit amet. Mauris sit amet fermentum nisi. Vivamus iaculis rhoncus lacus.Ut maximus augue in tellus elementum, eget efficitur sem scelerisque. Nam nec augue fermentum, mattis ligula quis, efficitur lacus. Suspendisse posuere libero eu eros tincidunt, ac egestas urna maximus. Sed eget nibh quis ligula semper dapibus. Aliquam ac iaculis lacus. Sed eu mollis elit. Morbi rhoncus eu ante eget consequat. Nam finibus enim ex, ac scelerisque lacus tempor vitae. Ut sagittis convallis sollicitudin. Duis fringilla ipsum orci, a tempor urna euismod laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras cursus libero metus, sed dignissim nisl maximus vitae. Morbi a est a nisl finibus ornare eu vel libero. Praesent eget ligula porta, aliquet eros ut, vestibulum nisi.</p>
CSS3:
#media screen and (max-width: 580px){
nav ul{
max-height: 0;
}
p#maincontent{
overflow: hidden;
text-overflow: ellipsis;
}
.showing {
max-height: 100%;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
#maincontent{
font-size: 80%;
}
.handle {
display: block;
}
}
Please let me know if I am doing something wrong.
try white-space: nowrap;
p#maincontent{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
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>