I'm trying to create a layout with the following specs and look:
|-------------|
| header |
|-------------|
| |
| main |
| |
| |
|-------------|
| footer |
|-------------|
The header should be visible always, meaning, it should move down when scrolling
if the height of the content of main isn't enough to fill the entire screen, it should take all the space to the bottom of the screen, except for the height of the footer.
if the height of the content of main is more than the height of the screen, the footer should be placed at the end of the main block, so it would appear only after scrolling to the bottom.
Of course, this could be easily done with a few paddings, a few position: absolute; and a few fixed values, but I'm trying to do all that with CSS3 (flex) without specifying the height of neither of the elements.
This is what I have currently: http://codepen.io/anon/pen/ZGXqBa
but as you can see I'm failing at points 1.
Btw, I'm using Bootstrap, if that would make things easier.
You can split the contents of the body in two parts:
The header
A wrapper which contains the main and the footer
Those parts will fill body without overflowing it.
If the main and the footer are tall enough, they will overflow its wrapper, but not the body.
This way the body won't be scrolled, so the header will always be at the top.
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body, #wrapper {
flex: 1; /* Exactly fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
#wrapper {
overflow: auto; /* Add scrollbars if necessary */
}
main {
flex-grow: 1; /* Grow to fill remaining space */
}
main, footer {
flex-shrink: 0; /* Needed for old Chrome */
}
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body, #wrapper {
flex: 1; /* Exactly fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
#wrapper {
overflow: auto; /* Add scrollbars if necessary */
}
main {
flex-grow: 1; /* Grow to fill remaining space */
}
main, footer {
flex-shrink: 0; /* Needed for old Chrome */
}
header, main, footer {
border: 1px solid;
}
<header>Header</header>
<div id="wrapper">
<main>Main</main>
<footer>Footer</footer>
</div>
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body, #wrapper {
flex: 1; /* Exactly fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
#wrapper {
overflow: auto; /* Add scrollbars if necessary */
}
main {
flex-grow: 1; /* Grow to fill remaining space */
}
main, footer {
flex-shrink: 0; /* Needed for old Chrome */
}
header, main, footer {
border: 1px solid;
}
<header>Header</header>
<div id="wrapper">
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
</main>
<footer>Footer</footer>
</div>
To achieve your first point you can use sticky positioning, but note it's not widely supported yet.
To achieve the other ones you can use flexbox magic.
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body {
flex-grow: 1; /* Grow to fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
header {
position: sticky; /* Stick it... */
top: 0; /* ... at the top */
}
main {
flex-grow: 1; /* Grow to fill available space */
}
Example with small content:
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body {
flex-grow: 1; /* Grow to fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
header {
position: sticky; /* Stick it... */
top: 0; /* ... at the top */
background: #fff;
}
main {
flex-grow: 1; /* Grow to fill available space */
}
body > * {
border: 1px solid;
}
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
Example with big content:
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body {
flex-grow: 1; /* Grow to fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
header {
position: sticky; /* Stick it... */
top: 0; /* ... at the top */
background: #fff;
}
main {
flex-grow: 1; /* Grow to fill available space */
}
body > * {
border: 1px solid;
}
<header>Header</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
</main>
<footer>Footer</footer>
Related
This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 5 months ago.
Other positions are working good, but when I try sticky its not working. I want the parent container to stick at my bottom of page.
.control-con {
position: sticky;
bottom: 0px;
width: 100%;
}
<section class="control-con">
<article class="controls">
<input type="range" name="playbar" class="playbar">
</article>
</section>
Sticky depends on the placement and the content added in the HTML.
If the positioned element is set to bottom, content has to precede it, like so:
.control-con {
position: sticky;
bottom: 0px;
width: 100%;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum sem dui, nec mattis nunc convallis ut. Proin posuere placerat risus, ut semper lorem varius ac. Curabitur consequat ex sed sem ultrices, quis ornare elit mollis. Fusce eu tristique enim, quis bibendum lectus. Nulla magna magna, maximus in urna et, mollis luctus lectus. Praesent augue mi, rhoncus eu ligula in, aliquet imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut efficitur gravida velit. Aliquam et libero lacinia, mollis metus vel, finibus risus. Pellentesque mollis augue ac condimentum mollis.
In lacinia congue porta. Curabitur augue felis, ultricies in velit et, egestas sagittis neque. Donec nec tristique tortor. Mauris tempor erat risus. Nullam vel congue ligula. Sed nulla sem, venenatis nec iaculis sed, ornare eget ante. Etiam efficitur magna vel ligula porta, nec porttitor turpis tempor. Curabitur at tempor erat. Aliquam venenatis consectetur dui. Integer id ipsum eleifend, dictum justo at, finibus nibh.
Fusce dignissim vulputate elit, a pulvinar ipsum fringilla at. In lacinia felis libero, sit amet placerat erat molestie at. Duis laoreet metus nec nunc semper convallis. Nulla lacus est, suscipit at aliquam et, mattis dignissim nibh. Donec id quam massa. Praesent posuere sagittis erat, non aliquet tellus dictum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus justo dolor, cursus tempor orci sed, cursus cursus lacus.
Phasellus ullamcorper justo a turpis commodo, et semper neque vehicula. Ut facilisis nisl eleifend ex feugiat blandit. Aenean mollis euismod orci sit amet condimentum. Nulla varius lorem eu ex rutrum, et imperdiet est placerat. Nunc eu sem molestie, laoreet ipsum eu, condimentum lacus. Maecenas ut ipsum mi. Morbi in suscipit orci.
Donec vel diam et tortor ultricies commodo. Donec in enim quis urna pharetra congue. Nunc dignissim volutpat elit eu suscipit. Aenean et porta orci. Etiam lobortis malesuada nisi vitae feugiat. Quisque purus lectus, aliquam quis suscipit vitae, porta vitae arcu. Integer maximus turpis quis volutpat blandit. Sed et commodo nisi. In risus tellus, eleifend ac finibus nec, viverra id arcu. Aenean elit diam, mattis porta aliquam eget, sagittis a dolor. In feugiat sapien fringilla dignissim viverra. Aliquam non dolor fermentum, congue tellus sed, tincidunt est. Ut finibus iaculis purus vitae rhoncus. Morbi dignissim leo tincidunt mattis lacinia.</div>
<section class="control-con">
<article class="controls">
<input type="range" name="playbar" class="playbar">
</article>
</section>
Else if we set the element we want to stick to top, the content has to come after it in order for it to work:
.control-con {
position: sticky;
top: 0px;
width: 100%;
}
<section class="control-con">
<article class="controls">
<input type="range" name="playbar" class="playbar">
</article>
</section>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum sem dui, nec mattis nunc convallis ut. Proin posuere placerat risus, ut semper lorem varius ac. Curabitur consequat ex sed sem ultrices, quis ornare elit mollis. Fusce eu tristique
enim, quis bibendum lectus. Nulla magna magna, maximus in urna et, mollis luctus lectus. Praesent augue mi, rhoncus eu ligula in, aliquet imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut efficitur gravida velit. Aliquam
et libero lacinia, mollis metus vel, finibus risus. Pellentesque mollis augue ac condimentum mollis. In lacinia congue porta. Curabitur augue felis, ultricies in velit et, egestas sagittis neque. Donec nec tristique tortor. Mauris tempor erat risus.
Nullam vel congue ligula. Sed nulla sem, venenatis nec iaculis sed, ornare eget ante. Etiam efficitur magna vel ligula porta, nec porttitor turpis tempor. Curabitur at tempor erat. Aliquam venenatis consectetur dui. Integer id ipsum eleifend, dictum
justo at, finibus nibh. Fusce dignissim vulputate elit, a pulvinar ipsum fringilla at. In lacinia felis libero, sit amet placerat erat molestie at. Duis laoreet metus nec nunc semper convallis. Nulla lacus est, suscipit at aliquam et, mattis dignissim
nibh. Donec id quam massa. Praesent posuere sagittis erat, non aliquet tellus dictum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus justo dolor, cursus tempor orci sed, cursus cursus
lacus. Phasellus ullamcorper justo a turpis commodo, et semper neque vehicula. Ut facilisis nisl eleifend ex feugiat blandit. Aenean mollis euismod orci sit amet condimentum. Nulla varius lorem eu ex rutrum, et imperdiet est placerat. Nunc eu sem molestie,
laoreet ipsum eu, condimentum lacus. Maecenas ut ipsum mi. Morbi in suscipit orci. Donec vel diam et tortor ultricies commodo. Donec in enim quis urna pharetra congue. Nunc dignissim volutpat elit eu suscipit. Aenean et porta orci. Etiam lobortis malesuada
nisi vitae feugiat. Quisque purus lectus, aliquam quis suscipit vitae, porta vitae arcu. Integer maximus turpis quis volutpat blandit. Sed et commodo nisi. In risus tellus, eleifend ac finibus nec, viverra id arcu. Aenean elit diam, mattis porta aliquam
eget, sagittis a dolor. In feugiat sapien fringilla dignissim viverra. Aliquam non dolor fermentum, congue tellus sed, tincidunt est. Ut finibus iaculis purus vitae rhoncus. Morbi dignissim leo tincidunt mattis lacinia.</div>
You just have to place content before the sticky element inside the HTML, and it will work.
So I have some html containers which are repeated on a page. Each container will contain large portions of text. As the text will span a considerable number of lines each container has a max-height so the containers arn't too big to scroll past with the overflow of the containers hidden so you have to scroll in them.
Using jquery, I want to have a button below each container which will expand only the specific container it is meant to work for.
How I want to do this is by using jquery to toggle a css class only on the specific container the button is meant for. I've inlcuded a snippet to show the concept and what I've managed to get working but currently my code adds the css class to every container not just the specific one.
Also I don't think I've written the jquery code properly either. It works in FireFox but not in the stackoverflow snippet, so help with understanding what I've written wrong there would also be much appreciated.
I've tried to figure it out and have tried to use similar answers to similar questions found on stackoverflow, but as I am still learning jquery I've gotten myself completely stuck with this.
$("container-expand").click(function(){
$(".container-box").toggleClass("container-box-expand");
});
.container-box {
display: block;
background-color: #f6f6f6;
font-size: 17px;
line-height: 1.5;
white-space: nowrap;
max-width: 100%;
max-height: 100px;
overflow: auto;
margin: 0;
padding: 20px 25px;
}
.container-box-expand {
max-height: none;
}
<div class="container-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
</div>
<button id="container-expand">Expand</button>
<br/><br/>
<div class="container-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
</div>
<button id="container-expand">Expand</button>
<br/><br/>
<div class="container-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
</div>
<button id="container-expand">Expand</button>
As someone else has said, your id's should be unique. Alternatively, make them classes.
If you make container-expand to be classes then you will need to alter your code like so...
$(".container-expand").click(function(){
$(this).prev().toggleClass("container-box-expand");
});
The this keyword refers to the button you are clicking (otherwise using just the class name would mean both buttons) . The .prev() bit will return the sibling element that comes before that button, so 'container-box' and in turn the correct class will get added to the correct container div.
I made a sticky navbar and I'm trying to center the menu and for some reason, I can't at all, it's driving me nuts. I can't figure out why and I have tried a lot of answers, none work.
HTML code here:
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Titanic</title>
<link rel="stylesheet" type="text/css" href="indexC.css">
</head>
<body>
<nav class="navbar">
<ul class="menu-list">
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
</ul>
</nav>
</body>
</html>
CSS code here
body{
background-image: url("");
}
.navbar{
text-align: center;
background-color: rgba(0,0,0,0.5);
position: sticky;
position: -webkit-sticky;
top: 0;
}
.menu-list{
text-decoration: none;
list-style-type: none;
}
.menu-list li {
display: inline-block;
}
h1{
color: white;
padding-top: 50px;
}
You can use this code
body{
background-image: url("");
margin: 0;
padding: 0;
}
.navbar{
text-align: center;
background-color: #777;
position: sticky;
position: -webkit-sticky;
top: 0;
padding: 15px;
}
.menu-list{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-list li {
display: inline-block;
}
.menu-list li a {
margin: 0;
padding: 0 30px;
text-decoration: none;
color: #ffffff;
font-size: 20px;
text-align: center;
}
.main p {
margin: 0;
padding: 30px;
color: #333333;
font-size: 20px;
font-weight: 500;
}
<nav class="navbar">
<ul class="menu-list">
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
</ul>
</nav>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tempus diam id varius. Curabitur quis placerat quam, sit amet consectetur odio. Aliquam mollis ac arcu sed viverra. Fusce et augue felis. Phasellus consequat ipsum sem, sit amet volutpat tortor ornare sit amet. Aliquam leo ante, sodales non faucibus sollicitudin, cursus sed lacus. Donec at finibus magna. Etiam porttitor, mi eget luctus viverra, lacus elit rhoncus nisl, quis pulvinar mauris purus eget lorem. In et nibh vitae tortor venenatis eleifend vitae quis turpis. Integer vestibulum nisi quam, varius commodo lacus lacinia vitae. Ut eget imperdiet eros, eget consectetur nulla. Nam nec semper est. Pellentesque scelerisque quam vel arcu tempus, sit amet mattis nulla luctus. Proin eu diam a justo accumsan dignissim vel eu elit. Mauris semper convallis massa eu ultrices.</p>
<p>Fusce quis nisl ac urna dignissim volutpat. Donec sed felis tincidunt, ornare orci eget, lacinia nunc. Quisque a lacus vel est ornare dignissim pretium quis neque. Mauris non velit et est laoreet laoreet. Aliquam feugiat non quam sit amet consequat. Proin a dolor tempor, pharetra arcu id, ullamcorper dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla dictum diam a varius. Vestibulum tempus pellentesque sem sit amet lobortis. Integer eu purus non erat feugiat cursus eu eget tortor. Mauris luctus, elit eu porta fermentum, ipsum neque pellentesque nunc, et mattis orci sem lacinia est. Sed eget est sed augue euismod aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Ut eu felis eget erat lobortis fringilla ut quis libero. Curabitur in tortor mattis, consectetur ex a, interdum quam. Nullam luctus neque eget felis tristique, vitae posuere est rhoncus. Morbi id imperdiet lorem. Nulla porttitor posuere sapien ac condimentum. Nam ut est et ex suscipit finibus ac at tortor. Proin augue risus, gravida vitae lacus non, consectetur pharetra tortor. Sed tristique pretium elit ut imperdiet. Morbi tincidunt mattis justo, quis blandit sem imperdiet elementum. Aenean varius molestie sapien quis viverra. Aliquam convallis efficitur erat. Aliquam convallis id leo eu ultricies. Etiam placerat odio ac placerat congue. In hac habitasse platea dictumst. Integer vitae ipsum ut massa tempor commodo sed id odio. Nunc semper pellentesque augue non ornare.</p>
<p>Nam sit amet eros risus. Nam arcu lectus, tincidunt quis fringilla eget, eleifend id felis. Duis at suscipit elit. Nunc tellus velit, viverra id urna vitae, scelerisque congue diam. Donec a nibh id nisi blandit tincidunt at at diam. Pellentesque accumsan diam turpis, hendrerit dapibus dolor finibus quis. Vivamus vulputate scelerisque enim, vitae rhoncus velit facilisis sed. Mauris laoreet eu eros sit amet auctor. Donec auctor molestie blandit.</p>
<p>Proin pretium nibh tortor, aliquam accumsan massa porttitor luctus. Donec facilisis nisi sit amet commodo egestas. Aenean quis hendrerit quam. Nam ut tellus lorem. Mauris sed rhoncus purus, eu tincidunt orci. Aliquam suscipit justo non laoreet ullamcorper. Morbi faucibus nisi vitae velit egestas posuere. Nam porta convallis diam non dignissim. Suspendisse est nisi, tincidunt sed ullamcorper at, facilisis sit amet nisl. Donec a enim non tellus posuere tincidunt. Curabitur a metus sagittis, commodo urna sit amet, efficitur ipsum. In sed diam pellentesque, feugiat metus sed, gravida orci. Cras tempus pellentesque euismod. Etiam sollicitudin lectus odio, eget vestibulum justo vestibulum et. Integer posuere feugiat neque, sed aliquam felis lobortis et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tempus diam id varius. Curabitur quis placerat quam, sit amet consectetur odio. Aliquam mollis ac arcu sed viverra. Fusce et augue felis. Phasellus consequat ipsum sem, sit amet volutpat tortor ornare sit amet. Aliquam leo ante, sodales non faucibus sollicitudin, cursus sed lacus. Donec at finibus magna. Etiam porttitor, mi eget luctus viverra, lacus elit rhoncus nisl, quis pulvinar mauris purus eget lorem. In et nibh vitae tortor venenatis eleifend vitae quis turpis. Integer vestibulum nisi quam, varius commodo lacus lacinia vitae. Ut eget imperdiet eros, eget consectetur nulla. Nam nec semper est. Pellentesque scelerisque quam vel arcu tempus, sit amet mattis nulla luctus. Proin eu diam a justo accumsan dignissim vel eu elit. Mauris semper convallis massa eu ultrices.</p>
<p>Fusce quis nisl ac urna dignissim volutpat. Donec sed felis tincidunt, ornare orci eget, lacinia nunc. Quisque a lacus vel est ornare dignissim pretium quis neque. Mauris non velit et est laoreet laoreet. Aliquam feugiat non quam sit amet consequat. Proin a dolor tempor, pharetra arcu id, ullamcorper dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla dictum diam a varius. Vestibulum tempus pellentesque sem sit amet lobortis. Integer eu purus non erat feugiat cursus eu eget tortor. Mauris luctus, elit eu porta fermentum, ipsum neque pellentesque nunc, et mattis orci sem lacinia est. Sed eget est sed augue euismod aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Ut eu felis eget erat lobortis fringilla ut quis libero. Curabitur in tortor mattis, consectetur ex a, interdum quam. Nullam luctus neque eget felis tristique, vitae posuere est rhoncus. Morbi id imperdiet lorem. Nulla porttitor posuere sapien ac condimentum. Nam ut est et ex suscipit finibus ac at tortor. Proin augue risus, gravida vitae lacus non, consectetur pharetra tortor. Sed tristique pretium elit ut imperdiet. Morbi tincidunt mattis justo, quis blandit sem imperdiet elementum. Aenean varius molestie sapien quis viverra. Aliquam convallis efficitur erat. Aliquam convallis id leo eu ultricies. Etiam placerat odio ac placerat congue. In hac habitasse platea dictumst. Integer vitae ipsum ut massa tempor commodo sed id odio. Nunc semper pellentesque augue non ornare.</p>
<p>Nam sit amet eros risus. Nam arcu lectus, tincidunt quis fringilla eget, eleifend id felis. Duis at suscipit elit. Nunc tellus velit, viverra id urna vitae, scelerisque congue diam. Donec a nibh id nisi blandit tincidunt at at diam. Pellentesque accumsan diam turpis, hendrerit dapibus dolor finibus quis. Vivamus vulputate scelerisque enim, vitae rhoncus velit facilisis sed. Mauris laoreet eu eros sit amet auctor. Donec auctor molestie blandit.</p>
<p>Proin pretium nibh tortor, aliquam accumsan massa porttitor luctus. Donec facilisis nisi sit amet commodo egestas. Aenean quis hendrerit quam. Nam ut tellus lorem. Mauris sed rhoncus purus, eu tincidunt orci. Aliquam suscipit justo non laoreet ullamcorper. Morbi faucibus nisi vitae velit egestas posuere. Nam porta convallis diam non dignissim. Suspendisse est nisi, tincidunt sed ullamcorper at, facilisis sit amet nisl. Donec a enim non tellus posuere tincidunt. Curabitur a metus sagittis, commodo urna sit amet, efficitur ipsum. In sed diam pellentesque, feugiat metus sed, gravida orci. Cras tempus pellentesque euismod. Etiam sollicitudin lectus odio, eget vestibulum justo vestibulum et. Integer posuere feugiat neque, sed aliquam felis lobortis et.</p>
</div>
I have 3 fixed elements
- top nav
- ads banner
- subMenu
I wish those to be position fixed, however, sometime, the ads banner can be hidden, in such case, subMenu should still be position fixed. is there a non js solution?
for now, bar has hardcoded top however if ads div is hidden, this will not work
<div class="page">
<div class="top-bar"> top nav</div>
<div class="ads">ads</div>
<div class="body">
<div class="bar">sub menu</div>
<div class="text">
long long text ...
</div>
</div>
</div>
css
.top-bar {
height: 50px;
background: blue;
position: fixed;
width: 100%;
top: 0;
}
.ads {
height: 70px;
background: gray;
position: fixed;
top: 50px;
width: 100%;
}
.bar {
height: 40px;
width: 100%;
background: yellow;
position: fixed;
top: 110px;
}
https://codepen.io/anon/pen/bLZgaO
Simply wrap the fixed elements in the same container and make this container fixed instead:
.fixed {
position: fixed;
width: 100%;
top: 0;
}
.top-bar {
height: 50px;
background: blue;
}
.ads {
height: 70px;
background: gray;
}
.bar {
height: 40px;
background: yellow;
}
<div class="page">
<div class="fixed">
<div class="top-bar"> top nav</div>
<div class="ads">ads</div>
<div class="bar">sub menu</div>
</div>
<div class="body">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.
</p>
</div>
</div>
</div>
Strange. Very strange. So I've got a paragraph of Lorem Ipsum in a XML file:
<?xml version="1.0" encoding="UTF-8"?>
<post>
<title>Test</title>
<content>Some test content<br/><br/><br/>TestTest Test.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eu magna bibendum dictum. Pellentesque interdum mi ac imperdiet tristique. Phasellus nec sapien elit. Donec convallis ante non vestibulum ultrices. Quisque ullamcorper est lectus, a sollicitudin sapien faucibus ac. Nam gravida rhoncus elementum. Nullam et velit dapibus, dignissim sem sit amet, luctus magna. Cras mollis eros dapibus, imperdiet purus convallis, dictum magna. Aliquam nisl lacus, venenatis vel lacinia quis, finibus at est. Nulla maximus sed enim in pretium. Fusce eu placerat dui. Curabitur mi magna, malesuada efficitur tellus sit amet, rutrum tristique erat. Phasellus sit amet orci purus. Pellentesque congue orci a tincidunt condimentum. Nullam semper, metus a tincidunt pulvinar, felis nibh faucibus mauris, a ultricies mauris tortor vitae sem. Praesent sed aliquet mauris.
Pellentesque odio lorem, dictum sed ipsum eget, viverra luctus libero. In tincidunt nisl eu nunc elementum, ut facilisis massa volutpat. In enim nibh, gravida vitae tempus eget, semper at orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Duis mattis tellus id lacus tempor tempus. Proin posuere leo quis neque imperdiet, sit amet facilisis lectus consectetur. Ut quam velit, elementum vel ultrices in, consectetur vel arcu. Praesent enim risus, fermentum vitae eros quis, dignissim convallis ligula. Vestibulum ultrices tempus diam id dapibus.
Quisque vel elit diam. Vivamus sed rhoncus nunc, id tincidunt augue. Vivamus et cursus mauris. Etiam finibus, risus accumsan pulvinar facilisis, ex erat vulputate nunc, sit amet elementum velit augue ut arcu. Etiam quis pretium urna, a rutrum ex. In lacinia metus nec urna pellentesque, sed accumsan nisi imperdiet. Phasellus porttitor porttitor lacus, nec aliquam magna scelerisque quis. Nullam auctor diam nisl, sed accumsan nisi ullamcorper ut. Sed nec ligula neque. Maecenas enim est, pharetra sit amet pulvinar nec, varius at tellus. In convallis tincidunt ex eu porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec luctus ex, et ultrices turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Fusce aliquet aliquet turpis, volutpat tristique lacus euismod id. Maecenas eu tortor eget tellus sodales fringilla. Sed ultricies ante eu consectetur luctus. Ut lobortis ullamcorper lacinia. Nam mattis felis ullamcorper leo ornare finibus. In quis commodo ligula. Nulla auctor purus maximus massa suscipit, at hendrerit arcu congue. Proin tincidunt porttitor quam, ut scelerisque urna feugiat sit amet. Donec mollis magna auctor finibus faucibus. Fusce fermentum ornare lobortis. Ut a eros a enim laoreet venenatis. Etiam eget elementum tortor. Nulla in risus eu erat ullamcorper pellentesque.
Nunc ac tincidunt massa, at vestibulum mi. Fusce iaculis, sem sed dictum volutpat, felis orci faucibus urna, vel imperdiet neque quam at tortor. Praesent porta arcu auctor, auctor massa sit amet, pretium eros. Nullam ligula neque, faucibus varius nulla et, dictum commodo dui. Nullam tempor accumsan malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in sodales odio. Cras posuere sagittis sem. Proin non augue vitae tortor vulputate imperdiet. Aenean tincidunt, leo at rhoncus lacinia, urna neque placerat mi, vitae dapibus mauris nibh at quam. Aenean in cursus ipsum, sed varius nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque suscipit lacus. Aliquam erat volutpat. Nulla scelerisque, ligula quis porta dapibus, mi lacus fermentum justo, eget pulvinar odio mauris non sem.
</content>
<date>April 1st 2015</date>
</post>
And this gets centered (along with the title "Test") To the center of the page, with text-align:0 along the margin stuff, and left:0 and right:0.
Here's the jsfiddle of the big text:
http://jsfiddle.net/6k5szuf0/embedded/result
And here's the jsfiddle of it not working
http://jsfiddle.net/6k5szuf0/1/embedded/result
Keep in mind, all I changed was the <content>.
You need to use text-align in #content div:
#content {
margin-top:20px;
position:absolute;
top:100%;
text-align: center;
width: 100%;/*also set it's width when you use absolute position*/
}
Here's the result.
Also a side note: you don't need to use:
.center {
text-align:center;
left: 0;
right: 0;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}
.post_content {
left: 0;
right: 0;
}
Notice: When you use left, right, bottom, or top you need to define the position, without setting the position explicitly to relative, absolute or fixed the values won't work as it would be in static position and in static position can't define those values.