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.
I took this image from another post on here: https://i.imgur.com/cx3jXPu.jpg
I want the sidebar to have 100% height even when the sidebar items don't fit the height of the div
I've done float: left to the sidebar, so the content of the page that is more than the height of the sidebar is coming under the sidebar. Like this:https://imgur.com/a/7yyJU
So, basically, I want the sidebar to extend to the height of the page without having content underneath it if that makes sense.
Here is an approach, where you can just fix the sidebar to the window using the CSS property position:fixed, this will set its position relative to the browser window, by setting top:0px;bottom:0px;left:0px it will be sticking to the left window and it will be full height always. Then we need to add a margin of 210px to offset the content of the website so that it does not overlap the sidebar.
Note: I have used and additional CSS property called box-sizing: border-box, what this CSS property does is, it includes the border and padding of the element into the total height of the element, this is used because without it the border will cause a scrollbar when there is no content.
Let me know if the above code fixes your issue!
html,
body {
margin: 0px;
height: auto;
width: 100%;
}
.sidebar {
width: 200px;
float: left;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
border: 1px solid black;
box-sizing: border-box;
}
.content {
margin-left: 210px;
}
<div class="sidebar">this is the fixed sidebar</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et condimentum nibh. Aenean eu orci aliquam, consequat ipsum at, blandit eros. Duis commodo tincidunt ligula. Suspendisse pellentesque erat risus, pulvinar convallis ligula congue non.
Nam sit amet tempus nisl. In malesuada at augue vel mattis. Sed luctus eu neque in dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin pharetra tellus eu convallis suscipit. Mauris sit amet ultrices
urna. Duis lectus nisl, luctus eu ultrices quis, scelerisque id lacus. Donec suscipit lacus sit amet accumsan consequat. Donec vitae sagittis risus. Sed at ante at sapien placerat laoreet a a leo. Integer tincidunt ut quam ornare luctus. Suspendisse
sodales, ex quis congue laoreet, lacus tortor tristique metus, vitae tempus ipsum augue vitae lectus. Donec pharetra et metus at ultricies. Aliquam tempus gravida tortor. Mauris non finibus erat. Nam sed scelerisque metus. In pulvinar, lacus in placerat
placerat, enim dolor porta magna, sed maximus enim felis nec tortor. Nunc elementum purus at justo dictum, quis mollis tellus vulputate. Maecenas sagittis placerat orci ac placerat. Nunc convallis sit amet nisi non imperdiet. Integer dictum ipsum nec
nibh dapibus, ut consectetur mi hendrerit. Donec euismod, felis in luctus malesuada, est purus varius sapien, ut rhoncus mauris est a eros. Proin id metus eu quam aliquet pharetra. Nullam tincidunt ligula vel ligula consectetur eleifend. Proin non posuere
libero. Etiam eu iaculis ex. Curabitur sit amet nibh interdum, elementum velit dictum, elementum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed bibendum sapien at imperdiet dictum. Phasellus congue
et dui vel ultrices. Quisque felis risus, malesuada ac scelerisque et, vestibulum nec leo. Aenean eget enim vestibulum, vulputate dolor eu, scelerisque libero. In ut venenatis ligula, a vulputate eros. Maecenas eget convallis diam, non condimentum arcu.
Mauris vitae velit in magna facilisis semper ut at lectus. Praesent tempor lorem nisl, eget finibus lorem lacinia id. Cras ac vulputate dui, sit amet pellentesque ante. Vestibulum mollis ante nec purus faucibus, ut mattis magna gravida. Aenean commodo
velit non lorem hendrerit maximus. Sed nec urna convallis, mattis dolor eget, accumsan quam. Donec luctus, ante consectetur egestas aliquam, turpis turpis posuere enim, in convallis nunc massa et arcu. Fusce lobortis sapien orci, eu mollis sapien sollicitudin
a. Ut semper iaculis malesuada. Fusce tincidunt lacinia justo quis faucibus. Aenean rutrum ex elit, in faucibus eros ultrices ut. Integer eu sagittis leo, et accumsan est. Aenean vel varius diam. Maecenas id tortor viverra, tristique massa non, consectetur
velit. Pellentesque condimentum elit sed urna porta sollicitudin. Donec ultricies pellentesque diam, in mollis risus consequat eget. Donec a consectetur velit. Integer lobortis efficitur ante, eu sagittis nisl tincidunt et. Donec a neque scelerisque,
pellentesque dui sed, feugiat tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et condimentum nibh. Aenean eu orci aliquam, consequat ipsum at, blandit eros. Duis commodo tincidunt ligula. Suspendisse pellentesque erat risus,
pulvinar convallis ligula congue non. Nam sit amet tempus nisl. In malesuada at augue vel mattis. Sed luctus eu neque in dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin pharetra tellus eu convallis
suscipit. Mauris sit amet ultrices urna. Duis lectus nisl, luctus eu ultrices quis, scelerisque id lacus. Donec suscipit lacus sit amet accumsan consequat. Donec vitae sagittis risus. Sed at ante at sapien placerat laoreet a a leo. Integer tincidunt
ut quam ornare luctus. Suspendisse sodales, ex quis congue laoreet, lacus tortor tristique metus, vitae tempus ipsum augue vitae lectus. Donec pharetra et metus at ultricies. Aliquam tempus gravida tortor. Mauris non finibus erat. Nam sed scelerisque
metus. In pulvinar, lacus in placerat placerat, enim dolor porta magna, sed maximus enim felis nec tortor. Nunc elementum purus at justo dictum, quis mollis tellus vulputate. Maecenas sagittis placerat orci ac placerat. Nunc convallis sit amet nisi
non imperdiet. Integer dictum ipsum nec nibh dapibus, ut consectetur mi hendrerit. Donec euismod, felis in luctus malesuada, est purus varius sapien, ut rhoncus mauris est a eros. Proin id metus eu quam aliquet pharetra. Nullam tincidunt ligula vel
ligula consectetur eleifend. Proin non posuere libero. Etiam eu iaculis ex. Curabitur sit amet nibh interdum, elementum velit dictum, elementum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed bibendum
sapien at imperdiet dictum. Phasellus congue et dui vel ultrices. Quisque felis risus, malesuada ac scelerisque et, vestibulum nec leo. Aenean eget enim vestibulum, vulputate dolor eu, scelerisque libero. In ut venenatis ligula, a vulputate eros. Maecenas
eget convallis diam, non condimentum arcu. Mauris vitae velit in magna facilisis semper ut at lectus. Praesent tempor lorem nisl, eget finibus lorem lacinia id. Cras ac vulputate dui, sit amet pellentesque ante. Vestibulum mollis ante nec purus faucibus,
ut mattis magna gravida. Aenean commodo velit non lorem hendrerit maximus. Sed nec urna convallis, mattis dolor eget, accumsan quam. Donec luctus, ante consectetur egestas aliquam, turpis turpis posuere enim, in convallis nunc massa et arcu. Fusce lobortis
sapien orci, eu mollis sapien sollicitudin a. Ut semper iaculis malesuada. Fusce tincidunt lacinia justo quis faucibus. Aenean rutrum ex elit, in faucibus eros ultrices ut. Integer eu sagittis leo, et accumsan est. Aenean vel varius diam. Maecenas id
tortor viverra, tristique massa non, consectetur velit. Pellentesque condimentum elit sed urna porta sollicitudin. Donec ultricies pellentesque diam, in mollis risus consequat eget. Donec a consectetur velit. Integer lobortis efficitur ante, eu sagittis
nisl tincidunt et. Donec a neque scelerisque, pellentesque dui sed, feugiat tortor.
</div>
give both the div float left and specific width.
And give them min-height: 100vh
I've been trying to find a solution to this, but I dont know if maybe Im not wording it correctly because I can't seem to find an answer.
I have a page with a 'quick links' button which is designed to float against the right hand side of the screen while scrolling.
I have used the following to get the effect (the right attriubte is to hide the menu which shows when you click on the element.)
#quickLinks {
position: fixed;
display: block;
top: 50%;
z-index: 2;
right: -250px;
}
This is all working pretty fine, but I've found that im struggling to accomodate when a scroll bar is present or not.
So ive added a bit of 'padding' to the right attribute to stick out a little when there is a scroll bar (which my page generally has), but since there is no scroll bar visible on an ipad, for instance, there is that padded gap.
Ive noticed that using 'absolute' rather than fixed seems to get the hugging effect right, but then I lose the floating scroll.
Any ideas or suggestions would be greatly appreciated. :)
thanks!
This seems like you have some other conflict in your CSS causing the issue. You might want to post your CSS file to help debug. Doing a simple fiddle like this in all browsers produces the same result - the fixed div moves slightly to the left when a scroll bar is present. To see the difference, remove some of the Lorem Ipsum text.
.right {
background: blue;
padding: 20px;
position: fixed;
right: 0;
top: 100px
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac metus eleifend, viverra felis at, semper elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean augue sapien, efficitur at felis at, mollis
iaculis ante. Nullam mattis risus eget ante tempor, non laoreet libero rutrum. Donec massa dui, venenatis in fringilla ut, commodo id dui. Morbi iaculis ipsum sit amet enim venenatis, ac lacinia enim sollicitudin. Integer porttitor aliquam sollicitudin.
Aenean elementum a orci a iaculis.</p>
<p>Quisque sit amet tortor non augue rhoncus sagittis in non felis. Etiam pulvinar enim viverra turpis pellentesque, ut sollicitudin turpis fermentum. Nulla facilisi. Etiam sagittis dui nec velit feugiat imperdiet. Suspendisse efficitur quam in urna porttitor,
quis tempor ex lacinia. Quisque a mattis ante, sed dapibus risus. Nulla nec massa eu leo molestie maximus sed nec libero. Cras eget aliquet nisl, a pharetra tellus. Cras a sem id ligula aliquet mollis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Donec volutpat, ipsum sit amet cursus laoreet, dui massa dapibus nisi, id finibus sem nisl id dui. Vestibulum aliquet lobortis enim, ut ultrices ante. Praesent faucibus pharetra sem quis mollis.</p>
<p>Curabitur convallis sollicitudin neque nec tincidunt. Morbi tristique blandit rutrum. Nullam sed imperdiet urna, id rutrum tortor. Aenean non dolor tempor nulla egestas placerat eu vitae magna. Sed vitae feugiat tellus. Aenean ut urna posuere, lacinia
neque ac, efficitur sem. Phasellus at tempor turpis, non ullamcorper urna. Donec in massa euismod, euismod nisi quis, sodales turpis. Suspendisse ut lacus non massa molestie rhoncus. Duis quis dui tristique, sodales sapien vel, porta nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices tincidunt lacus et pulvinar.</p>
<p>Sed placerat odio eros, eget elementum enim tempor vitae. Sed sed laoreet nulla. Nam justo augue, ornare a quam eu, placerat luctus risus. Aenean lobortis in ex sit amet pretium. Fusce iaculis lorem arcu, posuere lacinia velit laoreet sit amet. Donec
malesuada, elit quis rutrum ullamcorper, purus libero volutpat quam, at bibendum turpis urna vel justo. Nunc aliquet lobortis ex vitae dapibus. Nullam laoreet ullamcorper enim, dapibus posuere massa pharetra at.</p>
<p>Integer hendrerit maximus mauris consectetur lobortis. Donec magna arcu, luctus vehicula lacus in, molestie tempus metus. Donec sollicitudin, metus sed imperdiet consequat, risus mauris placerat ligula, et volutpat ex enim nec ipsum. Morbi massa risus,
dignissim sit amet nisl ac, efficitur lobortis dolor. Duis id porta odio. Suspendisse tempus porta erat, et laoreet lectus luctus non. Etiam vel neque et ligula cursus sodales. Nunc finibus, tortor ac rhoncus venenatis, odio nisl suscipit turpis,
ac convallis enim quam a urna. Nam condimentum risus in magna fermentum scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac metus eleifend, viverra felis at, semper elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean augue sapien, efficitur at felis at, mollis
iaculis ante. Nullam mattis risus eget ante tempor, non laoreet libero rutrum. Donec massa dui, venenatis in fringilla ut, commodo id dui. Morbi iaculis ipsum sit amet enim venenatis, ac lacinia enim sollicitudin. Integer porttitor aliquam sollicitudin.
Aenean elementum a orci a iaculis.</p>
<p>Quisque sit amet tortor non augue rhoncus sagittis in non felis. Etiam pulvinar enim viverra turpis pellentesque, ut sollicitudin turpis fermentum. Nulla facilisi. Etiam sagittis dui nec velit feugiat imperdiet. Suspendisse efficitur quam in urna porttitor,
quis tempor ex lacinia. Quisque a mattis ante, sed dapibus risus. Nulla nec massa eu leo molestie maximus sed nec libero. Cras eget aliquet nisl, a pharetra tellus. Cras a sem id ligula aliquet mollis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Donec volutpat, ipsum sit amet cursus laoreet, dui massa dapibus nisi, id finibus sem nisl id dui. Vestibulum aliquet lobortis enim, ut ultrices ante. Praesent faucibus pharetra sem quis mollis.</p>
<p>Curabitur convallis sollicitudin neque nec tincidunt. Morbi tristique blandit rutrum. Nullam sed imperdiet urna, id rutrum tortor. Aenean non dolor tempor nulla egestas placerat eu vitae magna. Sed vitae feugiat tellus. Aenean ut urna posuere, lacinia
neque ac, efficitur sem. Phasellus at tempor turpis, non ullamcorper urna. Donec in massa euismod, euismod nisi quis, sodales turpis. Suspendisse ut lacus non massa molestie rhoncus. Duis quis dui tristique, sodales sapien vel, porta nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices tincidunt lacus et pulvinar.</p>
<p>Sed placerat odio eros, eget elementum enim tempor vitae. Sed sed laoreet nulla. Nam justo augue, ornare a quam eu, placerat luctus risus. Aenean lobortis in ex sit amet pretium. Fusce iaculis lorem arcu, posuere lacinia velit laoreet sit amet. Donec
malesuada, elit quis rutrum ullamcorper, purus libero volutpat quam, at bibendum turpis urna vel justo. Nunc aliquet lobortis ex vitae dapibus. Nullam laoreet ullamcorper enim, dapibus posuere massa pharetra at.</p>
<p>Integer hendrerit maximus mauris consectetur lobortis. Donec magna arcu, luctus vehicula lacus in, molestie tempus metus. Donec sollicitudin, metus sed imperdiet consequat, risus mauris placerat ligula, et volutpat ex enim nec ipsum. Morbi massa risus,
dignissim sit amet nisl ac, efficitur lobortis dolor. Duis id porta odio. Suspendisse tempus porta erat, et laoreet lectus luctus non. Etiam vel neque et ligula cursus sodales. Nunc finibus, tortor ac rhoncus venenatis, odio nisl suscipit turpis,
ac convallis enim quam a urna. Nam condimentum risus in magna fermentum scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac metus eleifend, viverra felis at, semper elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean augue sapien, efficitur at felis at, mollis
iaculis ante. Nullam mattis risus eget ante tempor, non laoreet libero rutrum. Donec massa dui, venenatis in fringilla ut, commodo id dui. Morbi iaculis ipsum sit amet enim venenatis, ac lacinia enim sollicitudin. Integer porttitor aliquam sollicitudin.
Aenean elementum a orci a iaculis.</p>
<p>Quisque sit amet tortor non augue rhoncus sagittis in non felis. Etiam pulvinar enim viverra turpis pellentesque, ut sollicitudin turpis fermentum. Nulla facilisi. Etiam sagittis dui nec velit feugiat imperdiet. Suspendisse efficitur quam in urna porttitor,
quis tempor ex lacinia. Quisque a mattis ante, sed dapibus risus. Nulla nec massa eu leo molestie maximus sed nec libero. Cras eget aliquet nisl, a pharetra tellus. Cras a sem id ligula aliquet mollis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Donec volutpat, ipsum sit amet cursus laoreet, dui massa dapibus nisi, id finibus sem nisl id dui. Vestibulum aliquet lobortis enim, ut ultrices ante. Praesent faucibus pharetra sem quis mollis.</p>
<p>Curabitur convallis sollicitudin neque nec tincidunt. Morbi tristique blandit rutrum. Nullam sed imperdiet urna, id rutrum tortor. Aenean non dolor tempor nulla egestas placerat eu vitae magna. Sed vitae feugiat tellus. Aenean ut urna posuere, lacinia
neque ac, efficitur sem. Phasellus at tempor turpis, non ullamcorper urna. Donec in massa euismod, euismod nisi quis, sodales turpis. Suspendisse ut lacus non massa molestie rhoncus. Duis quis dui tristique, sodales sapien vel, porta nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices tincidunt lacus et pulvinar.</p>
<p>Sed placerat odio eros, eget elementum enim tempor vitae. Sed sed laoreet nulla. Nam justo augue, ornare a quam eu, placerat luctus risus. Aenean lobortis in ex sit amet pretium. Fusce iaculis lorem arcu, posuere lacinia velit laoreet sit amet. Donec
malesuada, elit quis rutrum ullamcorper, purus libero volutpat quam, at bibendum turpis urna vel justo. Nunc aliquet lobortis ex vitae dapibus. Nullam laoreet ullamcorper enim, dapibus posuere massa pharetra at.</p>
<p>Integer hendrerit maximus mauris consectetur lobortis. Donec magna arcu, luctus vehicula lacus in, molestie tempus metus. Donec sollicitudin, metus sed imperdiet consequat, risus mauris placerat ligula, et volutpat ex enim nec ipsum. Morbi massa risus,
dignissim sit amet nisl ac, efficitur lobortis dolor. Duis id porta odio. Suspendisse tempus porta erat, et laoreet lectus luctus non. Etiam vel neque et ligula cursus sodales. Nunc finibus, tortor ac rhoncus venenatis, odio nisl suscipit turpis,
ac convallis enim quam a urna. Nam condimentum risus in magna fermentum scelerisque.</p>
</div>
<div class="right">
I'm floating on the right!
</div>
https://jsfiddle.net/uy1tgdew/1/
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.
I have a web site with a lot of text. To make it more readable when printed, I'd like to create a paginated two-column layout, that is I want two columns per page and the text of column one should wrap to column two and from that to the next page (instead of cutting two very tall columns into pages):
Wanted Not Wanted
1 2 1 4
--- ---
3 4 2 5
--- ---
5 6 3 6
Does someone have a working example for this?
You can use this css
#media print {
body{
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
}
Also you can add a single column title.
CSS
#media print {
.two {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
.one {
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}
}
HTML
<section class="one">
<h1>My awesome project</h1>
</section>
<section class="two">
Very long content
</section>
Example
h1 {
text-align: center
}
count::before {
counter-increment: section;
content: "\A I am flag " counter(section) ".\A ";
font-weight: bold;
white-space: pre;
}
#media print {
.two {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
.one {
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}
input[type="button"] {
display: none
}
}
<input type="button" onclick="print()" value=" --> Click Here to print! <--">
<section class="one">
<h1>My awesome project</h1>
<h2>Chapter 1</h2>
</section>
<section class="two">
<count/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est,
eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et
fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis.
<count/>
Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue
vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas
ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue, aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat. Etiam mi orci, euismod vitae
mollis vel, facilisis in ipsum. Donec porta dolor sed hendrerit tempor. Morbi et eros sit amet lorem tristique luctus sed non felis. Aenean eros dui, hendrerit sed odio quis, cursus sollicitudin felis. Nullam tincidunt sed mi nec dictum. Curabitur velit
purus, gravida nec luctus at, vehicula ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vitae est eu ipsum scelerisque ullamcorper sit amet commodo elit. Nulla ut commodo tortor.
<count/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
vehicula.
<count/>
Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est, eu malesuada
sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et fringilla. Vivamus
et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis. Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus
felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim
urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue,
aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat.
<count/>
Etiam mi orci, euismod vitae mollis vel, facilisis in ipsum. Donec porta dolor sed hendrerit tempor. Morbi et eros sit amet lorem tristique luctus sed non felis. Aenean eros dui, hendrerit sed odio quis, cursus sollicitudin felis. Nullam tincidunt sed
mi nec dictum. Curabitur velit purus, gravida nec luctus at, vehicula ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vitae est eu ipsum scelerisque ullamcorper sit amet commodo elit. Nulla
ut commodo tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus
sodales. Sed mattis sed felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus
sed, facilisis condimentum nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit
bibendum. Sed condimentum, mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus.
<count/>
Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque
lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo,
consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis.
Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est, eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus
convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper
ut congue a, consequat eu turpis.
<count/>
Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue
vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas
ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue, aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat.
</section>
<input type="button" onclick="print()" value=" --> Click Here to print! <--">
You can use the #media print css parameter to define different styles only for printing.
If you can show me an example of HTML I can give you a proper solution, but in general you can define your div's or table's with with float:left; under #media print.
You could possibly do this with CSS print styling, but you need to be careful with tables as well as floating divs, it doesn't always work. page-break-before