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
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 have a bootstrap container for my page content, but no container for my header. My header is very simple and bootstrapping it seems overkill. The issue i'm running into is my non bootstrap sticky header is sticky only up until the page hits the bootstrap content. Then the sticky header stops in its tracks. DO you know where i'm going wrong?
HTML
(the 500px div is there for me to test the sticky header. The header is sticky for all 500px, until the page gets to the bootstrap container. Then the sticky header stops in its tracks.)
<header>
<div class="navMenu">
<div class="navLinkWrapper">
<a class="nav-link" onclick="slideTo('#aboutSection');">ABOUT</a>
<a class="nav-link" onclick="slideTo('#projectsSection');">PROJECTS</a>
<a class="nav-link" onclick="slideTo('#contactSection');">CONTACT</a>
</div>
</div>
<div style="height: 500px;">
</div>
</header>
<main>
<div class="container-fluid">
<div class="row" id="aboutSection">
<div class="col-lg-12">
<div class="terminal mx-auto">
<div class="form-inline aboutHeader">
CSS
.navMenu {
background-color: rgb(77, 22, 59);
position: sticky;
top: 0;
}
.navLinkWrapper {
width: 590px;
margin: 0 auto;
}
.nav-link {
font-family: 'Ubuntu Mono', monospace;
font-size: 30px;
color: limegreen !important;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
letter-spacing: 3px;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
.nav-link:hover {
color: white !important;
}
The sticky element will only stick to its parent.
Try adding your sticky css to header:
header {
padding: 20px;
color: white;
background-color: rgb(77, 22, 59);
position: sticky;
top: 0;
}
<body>
<header>
<div class="navMenu">
<div class="navLinkWrapper">
<a class="nav-link" onclick="slideTo('#aboutSection');">ABOUT</a>
<a class="nav-link" onclick="slideTo('#projectsSection');">PROJECTS</a>
<a class="nav-link" onclick="slideTo('#contactSection');">CONTACT</a>
</div>
</div>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
<p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. </p>
<p>Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. </p>
<p>Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. </p>
<p>Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. </p>
<p>Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
<p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. </p>
<p>Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. </p>
<p>Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. </p>
<p>Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. </p>
<p>Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. </p>
</main>
</body>
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/
Say I've got an image that I float to the top right, how can I make all other elements ignore it and run through it like there's nothing's there? It's transparent and text should be able to go through the image to get to the end of the line instead of ending at the left side of the image. How is this possible and if it is can it be done without using JavaScript?
You could use a combination of relative and absolute positioning in the following way:
relatively position the P element containing the text
absolutely position the img inside it.
div {
position: relative;
}
p {
position: relative;
z-index: 2;
}
img {
position: absolute;
right: 0;
top:0;
z-index: 1;
}
<div>
<img src="http://placehold.it/300x150">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis dui, mattis nec nisi eu, rhoncus bibendum magna. Cras dignissim ante eget elit imperdiet, nec egestas lorem hendrerit. Vivamus non fringilla ex. Nulla lobortis risus massa, a pulvinar lacus ultrices nec. Vivamus sed viverra nunc. Quisque eget massa tellus. Fusce mattis, nisl quis consequat mollis, dui tortor consequat nisl, vitae vestibulum arcu lectus quis lacus. Vestibulum fringilla facilisis tristique. Morbi pellentesque blandit tristique. Ut tortor elit, rhoncus vitae maximus at, mollis sed lacus. Maecenas faucibus metus et tortor aliquam, nec aliquet ante hendrerit.
Sed non commodo odio. Phasellus nec lacus in ipsum tincidunt suscipit non vitae augue. Sed ultrices enim a eros sodales laoreet. Integer quis nisl congue, lacinia leo ut, vulputate ex. Fusce lacinia faucibus purus, vitae consequat orci cursus ac. Sed pharetra ac turpis id posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ligula tortor. Vestibulum rhoncus felis quis dictum mattis. Donec gravida vestibulum pulvinar.
Vestibulum pellentesque iaculis leo. Donec at tincidunt ligula, non placerat metus. Fusce aliquam vel risus quis egestas. Suspendisse nec vestibulum tellus. Pellentesque rhoncus quam et blandit condimentum. Ut vitae neque tempor, molestie lectus at, feugiat ipsum. Integer suscipit dui ut dolor interdum laoreet. Integer pharetra lectus ut rutrum fringilla. Sed sed mauris posuere, lobortis ipsum id, aliquet orci. Nam in felis egestas, mattis dolor id, vulputate dolor. Nunc venenatis risus dolor, id tempor ipsum suscipit in. In scelerisque libero justo, sed euismod dolor hendrerit non. Curabitur mattis orci ac massa mollis, vel suscipit velit lobortis. Praesent semper, elit eu auctor congue, risus erat semper tellus, quis dignissim felis massa eu ante. Ut laoreet metus ligula. Quisque dictum sem et ultricies fringilla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus maximus pulvinar odio in lacinia. Maecenas dapibus leo vel sollicitudin scelerisque. Vivamus aliquam eleifend lorem eget dignissim. Praesent egestas convallis convallis. Suspendisse mollis metus quam. In scelerisque turpis sapien, luctus faucibus turpis accumsan at. Praesent consectetur malesuada sapien, ac viverra massa semper sed. Nunc a urna eleifend, sollicitudin lacus eu, tristique sapien. Sed et ipsum sit amet sem ornare sagittis vel quis ante. Nunc tincidunt eros quis massa porttitor, ac consectetur nibh venenatis. Vivamus condimentum lacus at ornare dictum. Aenean nec tempus felis. Ut facilisis ornare mauris, id pulvinar nunc posuere quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Praesent vitae pellentesque orci. Quisque dignissim ex id pellentesque dignissim. Maecenas auctor elit et luctus mattis. Sed lacus justo, varius ac magna vel, lacinia varius odio. Curabitur vestibulum vitae felis a viverra. Praesent faucibus arcu eros. Morbi eleifend nisl non blandit varius. Nulla pellentesque ipsum et nulla mollis placerat. Praesent accumsan ipsum at nulla ultricies vehicula.</p>
</div>
Use absolute positioning for the element and relative positioning on its parent to establish an initial containing block
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.