Related
I have a dynamically generated HTML page that has to be saved as pdf. The page has border that has to appear on the edge of the page thus in the #media print, I have set the #page size as A4 and margins as 0. The problem is that the content will get overwritten on the page border.
When I set the padding to the border, the top of the page first page gets properly printed but the content gets overwritten on the border at the bottom and in the remaining pages.
This can be clearly seen as shown in the images below.
Since I gave padding to the top border, the top of the first page is fine but not the bottom.
In this second page, the entire content gets inside the margin.
Here is the HTML for the same document.
body {
margin: 0px;
padding: 0px;
}
#pageborder {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin: 0px;
padding: 0px;
}
#pageborder2 {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
margin: 0px;
padding: 0px;
}
#pageborder3 {
position: fixed;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
border: 3px solid #F5821F;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
padding-top: 90px;
padding-bottom: 90px;
}
#innerContent {
margin: 50px;
}
#media print {
#page{
margin: 0;
}
#pageborder3 {
padding-top: 90px;
padding-bottom: 90px;
}
}
<body>
<div id="pageborder">
</div>
<div id="pageborder2">
</div>
<div id="pageborder3">
</div>
<div id='innerContent'>
<h1>Test</h1>
<p>Lorem Ipsum</p>
</div>
</body>
A combination between page-break-inside: avoid and padding/margin on paragraphs will do the trick.
This will look strange if there are very large paragraph around the page break, as this will make a big gap at the bottom of the page, so you should divide the text in smaller paragraphs.
/* I have removed your pageborder styles from answer to only include
the relevant styles for the sollution to the problem. */
#page{
size: A4;
margin: 0;
}
#innerContent {
/* This is the margin around the content */
margin: 50px;
}
h1, h2, h3, h4, h5, h6, p, .flow-control
/* Add any element types here that can occur as top element in the document flow
or just add class="flow-control" where needed */
{
page-break-inside: avoid; /* Make sure no page breake inside a paragraph */
padding-top: 50px; /* Creates a buffer to enlarge the area for page break.
This is also the visual padding for the firs paragraph on each page. */
margin-top: -50px; /* Cancel the top padding for all except the first paragraph on each page. */
}
h1, h2{
margin-top: -20px; /* Reduce the cancelling of top padding, so that
these elements actually will have some top padding */
}
p {
padding-bottom: 20px; /* This is the margin between paragraphs and also
works as buffer size at bottom of the page */
}
<body>
<div class="pageborder" id="pageborder1"></div>
<div class="pageborder" id="pageborder2"></div>
<div class="pageborder" id="pageborder3"></div>
<article id='innerContent'>
<h1>Lorem Ipsum</h1>
<section>
<blockquote cite="https://la.wikisource.org/wiki/De_finibus_bonorum_et_malorum/Liber_Primus">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</blockquote >
<blockquote cite="https://www.quora.com/What-is-the-origin-of-lorem-ipsum-text">
There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
</blockquote >
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, justo quis elementum elementum, dui dolor accumsan ligula, vitae condimentum est magna a dui. Praesent accumsan mi eget augue cursus, vel maximus ante cursus. Nullam luctus massa gravida ipsum luctus dignissim. In eget turpis ut sapien consequat euismod. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac porttitor nisl. Fusce ac sapien eget lacus gravida pharetra non id risus. Donec luctus finibus commodo. Cras convallis in nunc a venenatis. Curabitur at nisi nec nisl semper sagittis sed vel sem.</p>
<p>Sed dictum massa quam, nec bibendum neque egestas non. Ut mattis lacus nisi, gravida hendrerit erat scelerisque sit amet. Nulla eget leo venenatis eros rhoncus bibendum et at quam. Morbi ac leo convallis, maximus velit et, porttitor justo. Aliquam erat volutpat. Donec aliquam ultricies nunc, vitae dapibus sapien sollicitudin non. Pellentesque ac diam ut odio posuere efficitur non finibus ante. Vivamus aliquam leo a suscipit finibus. Mauris a ex metus. Phasellus luctus augue sit amet ipsum venenatis, at imperdiet nunc sollicitudin. Cras iaculis lorem ac justo posuere, sed venenatis nibh fringilla.</p>
<p>Duis imperdiet euismod sem, id dignissim erat gravida vel. Duis nec nibh lectus. Donec in rhoncus sapien. Nulla nisi nisl, gravida at vulputate at, ornare id tortor. Nulla varius ligula ac turpis porta, non tristique leo efficitur. Quisque suscipit, est ut aliquam interdum, mi nulla pharetra metus, imperdiet imperdiet ex sapien sed metus. Integer sit amet lectus ut justo tincidunt laoreet sit amet ac ipsum.</p>
<p>Donec mollis tempus cursus. Mauris et tincidunt ante. Nam leo ex, volutpat non velit ac, imperdiet luctus tellus. Vestibulum vitae consectetur mauris, eu imperdiet dolor. Vestibulum viverra mi id diam viverra, at convallis ex bibendum. Nam mollis feugiat pulvinar. Maecenas neque ipsum, consequat a iaculis at, semper in ipsum. Vivamus a porta sapien. Fusce pulvinar, nulla at euismod semper, ipsum arcu vestibulum orci, sed egestas lectus odio et mi. Sed venenatis felis accumsan, consectetur orci sed, convallis risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin mattis, orci ac rutrum lobortis, odio tellus euismod mi, et scelerisque tellus massa ut risus.</p>
<p>Aenean in elit vitae risus pharetra suscipit eu sed risus. Maecenas sollicitudin nunc ac lacus fermentum tincidunt. Maecenas a pretium ipsum. In viverra eros sit amet lectus eleifend, at auctor velit mollis. Proin aliquam risus vel arcu pellentesque, eget volutpat justo facilisis. Nunc in ex tellus. Mauris euismod luctus commodo. Pellentesque arcu justo, aliquam ut quam in, egestas dapibus ante. Morbi facilisis mi nec leo semper laoreet. Aenean ac dolor vel erat suscipit vulputate. Praesent sit amet eleifend libero, sit amet viverra lorem. Ut eleifend lectus non tempus placerat. Praesent magna ipsum, porta sit amet mattis vel, condimentum eleifend magna.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas velit tortor, faucibus vitae rhoncus eget, laoreet vel sem. Proin interdum ut risus a tempor. Aliquam malesuada, tellus et luctus iaculis, est est aliquet nisl, volutpat elementum augue nunc ut lorem. Nulla facilisis ipsum vestibulum, iaculis magna in, maximus libero. Suspendisse tortor odio, euismod nec leo placerat, mattis varius elit. Suspendisse a ipsum vehicula, viverra metus eget, scelerisque dui. Suspendisse potenti. Vivamus a sapien eget felis mollis imperdiet.</p>
<p>Sed accumsan eu dolor nec vestibulum. Aenean interdum porttitor mattis. Curabitur finibus, erat nec posuere luctus, elit nisi imperdiet neque, eget maximus nulla dolor at justo. In sem odio, feugiat quis condimentum id, sodales id felis. Nulla facilisi. Vestibulum odio ex, blandit vel ullamcorper ac, tincidunt et justo. Vestibulum congue congue vehicula. Praesent tempor tortor ut tellus vulputate hendrerit. Proin lectus ante, dapibus eu laoreet varius, dictum sit amet lacus.</p>
<p>Integer vel mollis justo, quis commodo diam. Morbi cursus mauris nibh. Proin vestibulum ornare turpis, in consequat tellus condimentum quis. Praesent nulla magna, commodo sit amet molestie a, sollicitudin laoreet elit. Fusce ut augue vitae ligula commodo mattis sit amet non augue. Nulla a lectus purus. Sed sed consequat magna, in tempus quam. Cras sed consectetur nulla, tempus luctus ligula. Proin porttitor porttitor nisl, quis pretium turpis imperdiet id. Fusce commodo nulla sem, vitae gravida nulla molestie eu. Donec accumsan ex eget faucibus luctus. Ut leo eros, accumsan id aliquam et, aliquet at tellus.</p>
<p>Proin fringilla congue metus, ac semper ex aliquam ullamcorper. Integer porttitor tempor leo ac elementum. Vivamus a nisi vitae tellus interdum rhoncus. Nam eleifend ipsum sit amet enim feugiat, vitae pulvinar elit dignissim. </p>
<p>Vivamus tempus felis enim, non fermentum erat venenatis a. Morbi dolor ante, iaculis in nulla sit amet, eleifend aliquam nisl. Phasellus ultrices turpis ut ipsum molestie, a euismod sem venenatis. Duis a leo ac quam gravida sagittis nec vitae dui. Proin pellentesque, nulla sed fringilla malesuada, dui erat dignissim ex, eget sollicitudin enim purus pellentesque risus. Aenean a porta lacus, nec ullamcorper tellus.</p>
<div class="flow-control"><!-- This is to make sure there are no page brake
between the header and next paragraph -->
<h2>Header test</h2>
<p>Curabitur eros metus, maximus ornare mollis suscipit, commodo sed erat. Suspendisse dolor lectus, suscipit auctor risus a, malesuada auctor magna. Cras erat augue, venenatis luctus erat ac, ultrices pretium tellus. Mauris faucibus convallis euismod. Mauris tincidunt sit amet metus quis mattis. Quisque luctus quam rutrum mollis mollis. Donec velit tortor, iaculis in mattis sed, consequat vitae ligula. Vestibulum tempus lacinia blandit. Integer eleifend lacus id lorem feugiat, at varius sapien accumsan. Nam fermentum hendrerit lorem, et euismod diam tincidunt sit amet. Donec vitae dolor in nunc eleifend tincidunt. Curabitur vel maximus purus. Donec varius lorem justo, a commodo dolor vehicula in. In condimentum risus sed placerat condimentum. Ut enim ex, pellentesque eget metus vel, gravida viverra arcu. Suspendisse interdum leo ac porta vestibulum.</p>
</div>
<p>Fusce ipsum justo, convallis et venenatis id, tincidunt non orci. Nam vestibulum molestie egestas. Vivamus ultricies ultrices fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin sit amet dui porta, tempor nibh finibus, suscipit felis. Aenean rhoncus enim at imperdiet porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tellus eros, euismod sit amet gravida sit amet, mattis ut tortor. Fusce nec lectus a massa iaculis tempor. Morbi tortor ante, facilisis eget diam suscipit, dignissim pulvinar nulla. Nunc ultrices eros sed facilisis mattis.</p>
<p>Vestibulum lobortis metus velit, id cursus justo viverra id. Sed euismod nisi nunc, id malesuada nulla porttitor ultricies. Quisque cursus ut nisl eu vehicula. Ut a convallis nulla. Maecenas vehicula dolor a dui mattis, non sollicitudin lorem malesuada. Sed faucibus vulputate turpis in fringilla. Donec feugiat dui at nulla iaculis rhoncus. Mauris venenatis congue maximus. Vivamus maximus volutpat dictum. Cras vehicula sodales ante ut viverra.</p>
<p>Vivamus at rutrum justo. Vestibulum vulputate scelerisque convallis. Etiam vulputate nunc tempor tortor varius lobortis. Suspendisse ut posuere augue. Proin nunc metus, fermentum at tincidunt in, gravida ut massa. Curabitur eu ex tristique, accumsan justo in, luctus dui. Praesent a dolor eu tellus gravida lobortis sed ut magna. Nunc feugiat elit ultricies, bibendum lacus nec, cursus elit. Proin facilisis mauris a dolor imperdiet, vel lacinia enim rutrum. Sed tristique ultricies magna ac lobortis. Integer nec varius sapien. Vestibulum convallis finibus enim, sed tincidunt lectus scelerisque quis.</p>
<p>Nam faucibus lorem et ultrices luctus. Aliquam id pharetra nisi. Curabitur malesuada elit eget nisi imperdiet fringilla. Quisque orci eros, pulvinar eget finibus ut, mollis vitae magna. Nulla molestie massa at convallis facilisis. Maecenas sagittis facilisis feugiat. Quisque rutrum, urna at consectetur pellentesque, mauris dolor faucibus nisl, vel tristique leo est vitae magna. Curabitur fermentum dignissim nisi tincidunt rhoncus.</p>
<p>Suspendisse pretium enim volutpat, fringilla urna tempor, dictum metus. Nunc vel purus vel arcu molestie hendrerit. Vestibulum sed mollis mauris. Fusce nisi velit, imperdiet sed porttitor at, elementum at mauris. Quisque at magna volutpat, rhoncus velit volutpat, aliquet dolor. Ut metus ante, commodo non risus sed, congue posuere metus. Mauris a sem metus. Duis accumsan mi non facilisis mollis. Maecenas et dolor eget felis rhoncus pretium. Aenean vitae arcu cursus, ultricies massa vel, congue leo. Proin suscipit nisi odio, malesuada interdum nisi aliquam at. Aliquam ac congue magna.</p>
</article>
</body>
Add these lines of code in your CSS, it will work :)
#pageborder2:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
position: fixed;
margin-left: 15px;
top: 10px;
border-radius: 10px;
}
#pageborder3:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
border-radius: 10px;
position: fixed;
bottom: 10px;
}
I'm trying to float two divs next to each other. They're both setup inside a parent div (wrapper).
I want the wrapper to be 90% width of page, while the other two are both percentage widths that fill up that 90%.
Advice tips etc?
https://jsfiddle.net/655qtmav/
CSS
#wrapper {
margin: 0 auto;
background:none;
width:90%;
}
.content {
top: 0;
left:0;
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(255, 255, 255, 0.3);
margin: 0 auto;
width:40%;
margin-bottom:20px;
float: left;
position:relative;
}
.sidebar {
top: 0;
left:0;
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(255, 255, 255, 0.3);
margin: 0 auto;
width:60%;
margin-bottom:20px;
float: right;
position:relative;
}
Your code are right, just add box-sizing:border-box inside both child elements as you are using padding in both to align them in one line, as below,
#wrapper {
margin: 0 auto;
background:none;
width:90%;
}
.content {
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(25, 255, 255, 0.3);
margin: 0 auto;
width:40%;
margin-bottom:20px;
float: left;
position:relative;
box-sizing:border-box;
}
.sidebar {
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(25, 255, 255, 0.3);
margin: 0 auto;
width:60%;
margin-bottom:20px;
float: right;
position:relative;
box-sizing:border-box;
}
<div id="wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>
You can try this trick also calc() function in css. If you are using padding:20px property then div width will increase (20x2)px so we can reduce 40px in increased width like calc(40% - 40px). Hope helps you.
#wrapper {
margin: 0 auto;
background:none;
width: 90%;
}
.content {
top: 0;
left:0;
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(0, 0, 0, 0.3);
margin: 0 auto;
width: calc(40% - 40px);
margin-bottom:20px;
float: left;
position:relative;
}
.sidebar {
top: 0;
left:0;
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(0, 0, 0, 0.1);
margin: 0 auto;
width:calc(60% - 40px);
margin-bottom:20px;
float: right;
position:relative;
}
.header {
width: 100%;
background-color:rgba(255, 255, 255, 0.5);
margin: 0 auto;
padding: 20px;
margin-top:-10px;
box-sizing: border-box;
}
<div id="wrapper">
<div class="header">
<h1>Title Here </h1>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Blog</li>
<li>Icons</li>
<li>Wallpapers</li>
<li>Textures</li>
<li>Stock Photos</li>
<li>Contact</li>
<li class="icon">
☰
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
</div>
<div class="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
</div>
</div>
that is happened because your padding :20px; the padding property will add extra space your div.in the below code I'm just commented it and it's working. you can use **calc()**to adjust the value of your width as given below when you operating with percentage and pixel.
#wrapper {
margin: 0 auto;
background:none;
width:90%;
}
.content {
/*top: 0;
left:0;*/
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(255, 255, 255, 0.3);
margin: 0 auto;
width:calc(40% - 40px);
margin-bottom:20px;
float: left;
position:relative;
background-color:red;
}
.sidebar {
/*top: 0;
left:0;*/
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(255, 255, 255, 0.3);
margin: 0 auto;
width:calc(60% - 40px);
margin-bottom:20px;
float: left;
position:relative;
background:yellow;
}
.header {
width: calc(100% - 40px);
background-color:rgba(255, 255, 255, 0.5);
margin: 0 auto;
padding: 20px;
margin-top:-10px;
}
<div id="wrapper">
<div class="header">
<h1>Title Here </h1>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Blog</li>
<li>Icons</li>
<li>Wallpapers</li>
<li>Textures</li>
<li>Stock Photos</li>
<li>Contact</li>
<li class="icon">
☰
</li>
</ul>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
</div>
<div class="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
</div>
</div>
I'm creating a webpage that will have a long list of questions. I'm separating the questions using divs so that I can get the page to jump to the correct section, including the section at the top of the page. The problem is that the header doesn't scroll with the content like it was before I started adding content. Before adding content, the header would scroll as soon as the page started scrolling. Now, it delays until you get to the Service Time Questions radio buttons. I've searched online to see what would cause a delay in scrolling a header, but haven't found any usable results.
Here's my HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="Layout.css">
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div class="header">
<h1>Sample Page</h1>
</div>
<div class="menu">
<ul>
<li>CMS ID & Auditor Name</li>
<li>Service Time Questions</li>
<li>Narrative Questions</li>
<li>Diagram Questions</li>
<li>Photo Questions</li>
<li>Estimatics Questions</li>
</ul>
</div>
<div class="content">
<div id="cmsID" class="subcontent">
<form action="./audit_submitted.php" method="post">
<h3>CMS ID & Auditor Name</h3>
<br/><br/>
<p> Enter CMS ID:
<input type="text" name="cmsID" size="25" maxlength="25" value=""/>
<br/><br/>
Auditor Name:
<input type="text" name="auditorName" size="25" maxlength="25" value=""/>
<br/><br/>
Select Carrier:
<select name="carrierID" required>
<option value="">Select...</option>
<option value = "0">GAIG/AMIG</option>
<option value = "1">Nat Gen</option>
<option value = "2">SoCal AAA</option>
<option value = "3">QBE</option>
</select>
</p>
</form>
<br/><br/><br/>
</div>
<div class="subcontent" id="serviceTime">
<br/>
<h3>Service Time Questions</h3>
<br/><br/>
<input type="radio" name="answer" value="1"> Yes
<input type="radio" name="answer" value="0"> No
<input type="radio" name="answer" value="1"> N/A
<br/><br/>
</div>
<div class="subcontent" id="narrative">
<br/>
<h3>Narrative Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="diagram">
<br/>
<h3>Diagram Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="photos">
<br/>
<h3>Photo Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="estimatics">
<br/>
<h3>Estimatics Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
</div>
<div class="footer">
© Sample Company 2016
</div>
</body>
</html>
And here's my CSS:
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
position: absolute;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 100%;
position: fixed;
padding-top: 20%;
z-index: -1;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 100%;
font-size: 1em;
float: right;
padding: 1%;
padding-top: 10%;
padding-bottom: 20%;
position: absolute;
z-index: -1;
margin-left: 10%;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
position: fixed;
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding: 0%;
width: 10%;
background-color: #505050;
height: 100%;
position: fixed;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
Made a few adjustments to your stylesheet. Using fixed and absolutes in the positions was causing most of the problem. Give definite heights to each div makes a difference.
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
height: 120px;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 500px;
float: left;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 500px;
font-size: 1em;
float: left;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding-top: 20%;
width: 100%;
background-color: #505050;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
IF YOU MARK THIS DUPLICATE, YOU HAD BETTER GIVE ME A LINK TO THE ANSWER I NEED. OTHERWISE, DON'T BOTHER MARKING IT DUPLICATE, COMMENTING OR A
Just change you CSS in the html, body for overflow-x: hidden to overflow: hidden and add #estimatics{margin-bottom: 200px}
Thanks to Jeff, I was able to track down what was wrong. His answer didn't fix the issue, but it made the root cause more obvious.
I had to change the height: 100%; in .content to min-height: 100%;.
I also added display: inline-block; to the end of .content.
Finally, I had to add background-color: #F8e8d2; to the .subcontent section because the subcontents were causing discoloration on the content div.
These updates fixed it so that the header scrolls when I start scrolling the page, and my jump links work perfectly.
So I have two divs, and am trying to create a parallax effect. So pretty much, when I scroll I want .collapse to be hidden behind .content. My problem here is that when I add position: fixed; to .collapse, the div is completely hidden. But when it isn't set to position: fixed;, it just acts like a div below a div, no parallax effect. Here is a JSFiddle.
HTML
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">
Lorem ipsum dolor sit amet.
</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, …</p>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.collapse {
background-image: url('../img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
left: 0;
right: 0;
z-index: -9999;
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
z-index: 9999;
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
Your example code suffers from a number of problems, all of which contribute to the confusion, and correcting one of them will not make much of a difference. That's why each of the comments above, while all valuable, appear not to do much by themselves.
The background picture to collapse, given as '../img/bg.jpg', resolves to 'http://fiddle.jshell.net/obgpkLLq/1/img/bg.jpg', which doesn't exist. As a result,collapse is white on white; invisible.
The z-index in content doesn't work, because content isn't positioned.
Also because content isn't positioned, it starts at the top of the screen, partially behind the nav bar and fully in front of collapse
The nav bar is positioned, but it doesn't have a z-index. This will cause problems later after we've corrected the content positioning.
None of the positioned sections have top properties, which will cause all of them to end up at the top of the window.
All these problems need to be solved before the page looks like you want.
In the snippet, I have simplified the nav bar somewhat, because its CSS was distracting from the main issues. Also, assuming that the nav bar needs to be in front of everything, I changed the z-indexes to 0 for collapse, 1 for content and 2 for the nav bar.
body,
h1,
p {
margin: 0
}
.nav {
margin-bottom: 20px;
margin-left: 0;
background-color: #fff;
height: 60px;
width: 100%;
position: fixed;
box-shadow: 0px 5px 5px #888888;
border-top: 1px solid #ccccff;
z-index:2; /* added */
}
.collapse {
background-image: url('http://lorempixel.com/940/400'); /* changed; needs to change back! */
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
top: 60px; /* added */
left: 0;
right: 0;
z-index: 0; /* changed */
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
position: relative; /* added */
top: 460px; /* added */
z-index: 1; /* changed */
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
<!-- Navigation -->
<div class="nav">
This is the nav bar
</div>
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">Lorem ipsum dolor sit amet.</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, tempor ut vestibulum in, varius id neque. Etiam nisl eros, posuere ac odio at, porta tincidunt ligula. Curabitur id auctor libero. Cras lacinia est ut laoreet egestas. Mauris
volutpat lectus in pellentesque facilisis. Sed lobortis enim eu elit aliquam pellentesque. Mauris ultrices, felis ut dapibus imperdiet, sem sem lobortis arcu, at rhoncus massa mauris a est. Aliquam erat volutpat. Nam ac lorem odio. Pellentesque
sodales, erat nec dictum fermentum, purus turpis sollicitudin arcu, ac imperdiet urna nunc ultrices diam. Nulla imperdiet leo nulla, a iaculis neque blandit venenatis. Morbi ipsum urna, finibus vitae ultrices ut, venenatis in arcu. Nullam et arcu
efficitur, viverra orci id, malesuada elit. Sed purus nisi, mollis at maximus et, mollis ut arcu. Donec id porta ipsum, vel tincidunt odio. In nec egestas ligula, at maximus eros. Ut consectetur consectetur velit, non maximus quam blandit ac. Cras
id vulputate arcu. Donec suscipit luctus est, faucibus iaculis ligula convallis id. Pellentesque nisl quam, interdum et blandit vel, ultrices et metus. Morbi cursus, odio non tempor vehicula, quam justo rhoncus purus, at interdum nisl justo at ante.
Aliquam cursus sit amet diam non maximus. Morbi dolor lorem, fermentum eget suscipit ac, pellentesque ut quam. Cras sit amet mi sagittis, ultricies lectus id, condimentum eros. Etiam mattis ligula nunc, vitae pulvinar urna molestie et. Nulla ex
lorem, viverra sed interdum id, dictum in dui. Nulla pellentesque fermentum urna eget aliquet. Morbi at condimentum augue, id lacinia dui. Etiam non lacus lorem. Duis sit amet nunc iaculis, feugiat lorem in, ultricies orci. Donec ornare quam sed
faucibus vehicula. Integer in felis ac orci congue facilisis quis et urna. Etiam sed tempus mi, eget congue quam. Nullam sodales pellentesque orci ut varius. In semper, erat non tincidunt feugiat, mauris massa hendrerit purus, eget pharetra diam
dolor sit amet purus. Sed id sapien ut nulla luctus maximus a ac lacus. In hac habitasse platea dictumst. Sed fringilla orci sapien, et facilisis velit vulputate in. Cras blandit id lectus eget vehicula. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Praesent egestas elit ac tempus lacinia. Cras efficitur facilisis tortor ut commodo. In porttitor mollis pellentesque. Mauris et tempus turpis. Etiam tincidunt diam eget ornare suscipit. Duis condimentum
velit sollicitudin massa interdum tristique. Cras risus libero, blandit ac ultricies sed, scelerisque sed massa. Nulla eu lobortis tellus. Suspendisse lorem nulla, blandit non pretium maximus, tempus ut urna. Nunc magna augue, iaculis at libero
eu, pellentesque vulputate est. Maecenas facilisis libero in odio fringilla, nec placerat erat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ut turpis venenatis, dapibus ligula ac, ornare lacus.
Etiam gravida orci eu tortor gravida, sit amet gravida eros tincidunt. Duis a turpis in ex faucibus sodales at sit amet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed blandit tellus tellus,
nec ornare ipsum ornare non. Maecenas sed dictum quam. Nunc tellus eros, feugiat quis porttitor nec, rutrum eu nisl. Aenean vel blandit neque. Nullam congue justo risus, malesuada congue sem ultricies a. Phasellus dictum magna eget est commodo,
a tincidunt erat mollis. Mauris luctus ante vel hendrerit porttitor. Donec egestas, felis quis sodales hendrerit, eros mauris cursus diam, eleifend bibendum justo neque sed lectus. Fusce feugiat eget ligula at elementum. Vestibulum tempus ipsum
ipsum, et dignissim augue commodo vitae. Nam at dolor in elit dignissim semper at fringilla elit. In congue, nunc ut malesuada bibendum, nunc urna varius nunc, vel sollicitudin purus turpis at ligula. Nullam sed ultricies nunc, eu ornare augue.
Nulla sit amet arcu et lorem tristique tincidunt vitae a urna. Praesent nec eros mollis diam vestibulum cursus faucibus eu velit. Phasellus at justo eget diam rutrum porttitor at ut nibh. Fusce tempor nisi ac dapibus congue. Mauris luctus, urna
eget gravida varius, quam eros pellentesque elit, et eleifend ligula elit quis elit. Fusce sed lacus sed justo vulputate tempus. Praesent auctor ornare neque, eget vehicula nisl vehicula in. Nunc urna purus, placerat eu ipsum at, bibendum consequat
ante. Curabitur in pharetra tellus. Sed ac vehicula lectus. Curabitur feugiat massa nec erat viverra rhoncus vitae quis libero. Donec sed purus porttitor orci maximus semper laoreet vel mauris. Duis malesuada scelerisque enim sed facilisis. Mauris
laoreet, urna sit amet pulvinar euismod, massa est commodo nulla, vel volutpat risus enim vitae leo. Donec viverra iaculis odio et tincidunt. Integer eleifend fermentum cursus. Praesent diam velit, aliquam sit amet mauris pretium, dictum scelerisque
felis. Donec fermentum porta libero nec vehicula. Ut vitae porta quam. Aliquam erat volutpat. Nullam a felis nec libero egestas consectetur. Pellentesque sit amet eros vel libero iaculis tempor vel a ex. Morbi eu dolor nec nunc laoreet hendrerit
in vitae ante. Nulla facilisi. Nam condimentum massa sit amet tortor pulvinar venenatis. Morbi gravida quam in turpis convallis, at egestas metus efficitur. Integer porta lectus eu vulputate dictum. Nunc mollis leo aliquam tortor cursus lobortis.
Ut finibus nisl nec feugiat molestie. Mauris urna massa, commodo ut risus id, interdum pellentesque mauris. Sed vulputate maximus varius. Nulla facilisi. Morbi ultricies elit magna, nec egestas nulla egestas id.</p>
</div>
</div>
I'm trying to create a sidebar that rests next to the content div but it sits below the content div, it's at the right x position just not the right y.
HTML:
<body>
<div id="framediv">
<div id="headerdiv">
</div>
<div id="content" class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing velit, a pharetra sem dictum vel. Aliquam varius porta est, vitae pulvinar nunc adipiscing in. Maecenas sem eros, gravida nec blandit vel, aliquam at dui. Aliquam ante est, lacinia id laoreet ac, convallis ac magna. Maecenas rhoncus ligula vitae mauris volutpat sed dapibus lectus fringilla. Nam orci metus, molestie eu placerat sit amet, faucibus in libero. Nunc tristique, elit vitae tincidunt rutrum, odio erat blandit nibh, eu facilisis sapien dolor rhoncus risus. Ut eu velit lectus. Sed vitae nisl orci. Nulla vel nisl ante. Donec sit amet nulla eget massa euismod ultrices vitae at nisi. Donec tempor justo auctor libero dapibus viverra. Cras commodo fermentum nisi. Maecenas porttitor euismod metus lacinia sodales. Aliquam egestas ligula purus, id sollicitudin risus. Nullam vel odio et libero viverra blandit vel et dolor.
Nullam mauris dui, consequat a placerat eu, semper non mi. Nam in leo vel lorem adipiscing commodo. Duis vestibulum erat vel felis tincidunt in congue ipsum rutrum. Sed in ipsum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra nisi eget arcu malesuada at dapibus elit varius. Morbi sodales, justo fermentum lobortis elementum, orci turpis vehicula nisl, quis laoreet sapien libero a leo. Aenean ac arcu augue, vitae pellentesque ipsum. Ut nec mauris at nisl luctus tempor a sed turpis. Pellentesque in odio libero, sit amet tincidunt nisl. Duis dictum tortor vitae sem sagittis in molestie nisl interdum. Maecenas mollis adipiscing augue, eget accumsan justo ultrices a. Suspendisse scelerisque justo et nisl consectetur a varius lacus sodales. Duis accumsan iaculis nulla, non pretium metus venenatis et. Sed gravida elementum ipsum sed aliquet.
Vestibulum tincidunt pulvinar aliquet. Nullam bibendum vulputate diam quis mattis. Etiam mollis dui eu quam feugiat pharetra. Donec non tempus eros. Fusce eleifend magna eu lorem imperdiet bibendum rhoncus eget odio. Etiam adipiscing nibh sit amet augue elementum tempus. Etiam hendrerit massa a augue laoreet vitae pretium enim aliquet. Mauris malesuada lorem vitae neque pretium convallis. Sed condimentum semper ipsum, consectetur imperdiet eros interdum eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec adipiscing nisi in erat feugiat tempor. Nunc tincidunt neque non nisl tristique quis ornare elit ornare.
Praesent nec augue ligula, quis iaculis diam. Nam eget felis est, eget pellentesque lectus. Ut suscipit varius magna, ac vestibulum risus egestas ac. Quisque id sapien sed leo luctus faucibus in non leo. Integer sit amet pellentesque velit. Vivamus convallis, lacus nec tincidunt viverra, nunc velit aliquam nisi, eu pretium tellus nisl eget eros. Etiam dolor leo, feugiat vel faucibus ac, ullamcorper quis turpis. Mauris nec felis elit. Donec dignissim ullamcorper arcu. Proin tempor, dui vel malesuada viverra, lacus mauris ullamcorper lacus, eu convallis dolor justo non massa. Maecenas volutpat, leo gravida eleifend pharetra, dolor mauris tempor odio, quis facilisis tellus nisl quis sapien. Donec quam mauris, malesuada id iaculis ut, pellentesque non mauris. Nullam interdum justo id nunc tempor sed consequat quam venenatis.
Curabitur ipsum augue, posuere at adipiscing nec, rutrum in nisi. Ut mattis placerat est aliquam vulputate. Nullam faucibus, libero in facilisis auctor, lectus metus suscipit ligula, quis sollicitudin ligula erat sit amet nisi. Suspendisse et suscipit lectus. Sed fermentum porta lorem, vel congue tortor sollicitudin molestie. Nulla imperdiet purus non velit ornare vestibulum id at massa. Curabitur lorem urna, fermentum ut suscipit sed, pretium sed ante. Nullam ligula ante, aliquam at blandit ac, aliquam in velit. Cras nisl libero, iaculis at rutrum ac, mollis nec tortor. Aenean dignissim viverra molestie. Vivamus ultricies sem purus, tempor pharetra elit. Sed placerat est at turpis eleifend accumsan. Cras metus ante, imperdiet et suscipit ut, interdum eget est. In rutrum imperdiet mi in consectetur.
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
</body>
CSS:
#menudiv{
display:inline-block;
float:none;
padding-bottom:20px;
}
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:980px;
height: 100%;
margin: auto;
}
#headerdiv{
width:950px;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#content.container{
height:100%;
width: 640px;
padding-top:50;
margin-top:50;
padding-left: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#sidebar{
position:absolute
float:left;
float:right;
top:250px;
height:100%;
width: 280px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
Here #html, body you don't need the '#' in front of html. On #sidebar you have
float:left;
float:right;
... don't think you any of it since you're positioning it absolute.
JSFiddle would be helpful as well.
Wrap your content with DIV
<div id="content" class="container">
<div id="maincontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing
velit, a pharetr
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
.container#maincontent {float:left: width:75%} //75% minus paddings minus margins minus borders
.container#sidebar {float:right; width:25%} //25% minus paddings minus margins minus borders
Your question seems a bit contradictory... as does a bit of your code.
If you simply want the sidebar to fall along the right side of the content div, then you could move your sidebar div, in the code, above the content div and assign it a "float: right".
If by "but it sits below the content div" you're referring to the code as opposed to the visual layout, then you can float the content div to the left and remove float on the sidebar (or float: right).
I also noticed that in your #sidebar css you're declaring conflicting floats for both left AND right.
Include float in your container as well.