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;
}
Related
I am working out of "HTML5 and CSS5 Illustrated Complete" Second Edition by Sasha Vodnik.
I did the initial Unit D example to a Tee, however logo styling and the positioning aren't applying correctly or at all.
/*
Lakeland Reeds Bed and Breakfast style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
*/
/* reset styles */
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
/* body and page container */
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 6.2em;
}
/* headings */
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
}
h1 {
padding: 0.4em;
color: white;
text-align: center;
}
h2 {
padding: 0.4em 0.6em;
}
p.logo {
padding: 0.2em;
border: 2px solid beige;
color: goldenrod;
position: absolute;
top: 2em;
left: 2em;
}
/* main content */
article {
width: 70%;
float: right;
top: 6.2em;
}
article p {
padding: 0 1em 1em;
}
/* sidebar */
aside {
width: 30%;
padding: 1em 0;
background-color: goldenrod;
}
aside p {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 0.4em 0;
margin: 0 0.6em;
}
/* footer section */
footer {
padding: 0.6em;
color: white;
background-color: darkgreen;
text-align: center;
clear: right;
}
footer p {
margin: 0.4em;
}
footer p.accent {
color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lakeland Reeds Bed & Breakfast - Test Page</title>
<!--
Lakeland Reeds Bed & Breakfast test page
Filename: longpage.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Lakeland Reeds<br>Bed & Breakfast</h1>
<p class=”logo”>ℒℛ</p>
</header>
<article>
<h2>Test Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra ullamcorper ultrices. Morbi egestas elementum ligula, eget congue elit pulvinar placerat. Curabitur dictum, velit et iaculis mattis, felis ante sodales lectus, consectetur convallis enim urna ut libero. Suspendisse placerat dignissim quam, et consequat ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id dolor ut nulla sodales lobortis in ac dolor. Maecenas bibendum eleifend lacus, maximus dignissim mi fermentum quis. Suspendisse sagittis tincidunt pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nunc velit, molestie nec metus vel, dictum rutrum est. Aliquam volutpat ex massa, tempus eleifend nisl eleifend sed. Fusce egestas cursus felis in fermentum. Mauris facilisis feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec feugiat erat nec sapien tincidunt congue. Etiam urna libero, aliquet ut neque a, vulputate fermentum velit.</p>
<p>Nullam vel enim luctus, imperdiet neque et, aliquet turpis. Morbi a rhoncus metus. Nulla facilisi. Nunc tincidunt vel eros id laoreet. Fusce id nibh rhoncus, porta nulla nec, euismod ligula. Phasellus bibendum mi lectus. Donec a egestas mauris.</p>
<p>Curabitur et sapien consequat, varius diam in, viverra massa. Aliquam erat volutpat. Vestibulum facilisis urna elit, vel malesuada mauris pulvinar vitae. In ultrices tortor nisl, et faucibus ex dignissim non. Vivamus eget risus tempus, rutrum ipsum sit amet, gravida mi. Vestibulum et lobortis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec ultricies risus quis metus cursus, in feugiat quam ultricies. Nullam sit amet enim in tellus molestie sodales et et leo. Duis pulvinar venenatis consequat. Aenean facilisis arcu libero, a auctor odio feugiat at. Donec sagittis sollicitudin maximus. Maecenas elementum, lectus vitae fringilla tempus, mi nibh faucibus sapien, in fermentum dui massa vel dui. Nullam sed ligula scelerisque, viverra quam sit amet, bibendum libero. Duis at fermentum dolor. Phasellus non dictum nulla. Morbi a semper nibh. Vivamus ullamcorper purus ac nisi consectetur bibendum. Nulla varius sodales tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur imperdiet neque nec purus pellentesque, vitae convallis libero accumsan. Praesent semper lacus in tellus eleifend, et tristique lorem egestas.</p>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
<p>Aenean eu ipsum eros. Aenean faucibus sollicitudin mi, vel ullamcorper nisi porttitor a. Suspendisse potenti. Mauris facilisis eu neque id dignissim. Pellentesque nunc enim, feugiat ac orci vel, bibendum tincidunt sem. Vivamus placerat finibus ultricies. Curabitur ac fringilla diam.</p>
<p>Integer mi nibh, accumsan fringilla consectetur eu, scelerisque nec ipsum. Nullam in bibendum risus. Integer fringilla enim ac diam sollicitudin, eget elementum odio accumsan. Aliquam efficitur congue ante volutpat lacinia. Nam et ante eu arcu bibendum mollis. Morbi elementum mauris tristique ullamcorper dictum. Vestibulum ultrices, nibh vel tristique lacinia, massa orci feugiat nisi, nec mattis libero sem sit amet sem. Curabitur in leo quis sapien porta blandit sit amet sed felis. Proin et diam nisi. Sed quis sapien quis lectus molestie imperdiet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam euismod arcu molestie, congue felis non, placerat lacus. Proin semper nisi non posuere porttitor. Donec turpis ipsum, tincidunt in pellentesque in, accumsan at ipsum. Fusce rhoncus auctor sem sed fringilla. Sed sodales lorem rhoncus nunc blandit vestibulum. Vestibulum convallis egestas maximus. Donec porta velit ipsum, porttitor condimentum ipsum cursus nec. In hac habitasse platea dictumst. In volutpat gravida iaculis. In porttitor mattis eros, et feugiat lectus pulvinar ut. Vestibulum vel libero at justo posuere tristique et in mauris. Duis condimentum lacinia luctus. Mauris ut cursus lacus, pellentesque efficitur metus. Nunc gravida, ex cursus commodo hendrerit, arcu metus scelerisque ligula, eu lacinia felis massa blandit diam. Pellentesque ac consequat est.</p>
<p>Cras volutpat vitae ipsum non molestie. Aliquam id risus quam. Aenean malesuada dui sed est suscipit varius. Morbi maximus diam luctus tempus mattis. In sit amet pulvinar eros, non imperdiet neque. Nullam suscipit tortor risus, pellentesque molestie tortor pharetra vel. Proin quis malesuada lacus. Sed pharetra scelerisque leo. Praesent accumsan at ipsum eu rutrum. Nam fermentum velit quis arcu ullamcorper maximus. Pellentesque blandit vehicula libero, eget sagittis est imperdiet et. Curabitur nisl eros, consequat vel tellus vehicula, pulvinar porta tellus.</p>
<p>Integer porttitor placerat fringilla. Proin eleifend in nulla in commodo. Etiam a dictum dui. Aliquam faucibus massa in lacinia fermentum. Nunc placerat condimentum tortor, sit amet varius mauris pretium quis. In non arcu dolor. Praesent venenatis sed sem eleifend consectetur. In ex mi, vestibulum non interdum et, luctus vel sem. Duis eu diam a tellus bibendum elementum.</p>
<p>Praesent condimentum sem eget magna consequat, eget gravida libero elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a posuere metus. Nullam tellus justo, venenatis sit amet arcu eu, venenatis vulputate neque. Etiam vestibulum orci quis mauris lacinia, et blandit arcu imperdiet. Vestibulum aliquam scelerisque justo, tincidunt congue orci convallis a. Ut facilisis arcu non orci interdum, sit amet facilisis mi consequat. Cras sed venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pharetra a sapien non ultrices. Donec finibus nulla quis purus ullamcorper, sit amet accumsan sem blandit. Ut tempus justo quis nulla viverra iaculis. In placerat turpis sit amet quam tincidunt, eget lobortis dui imperdiet. Fusce a malesuada ligula, et dapibus dolor. Maecenas euismod dui nec mauris fermentum fringilla.</p>
<p>Mauris dui lectus, luctus et auctor mollis, luctus fringilla dui. Duis pharetra massa id arcu imperdiet mollis. Nam ornare efficitur gravida. Sed ultrices nibh nisi, ut maximus purus aliquam et. In dignissim ut tortor nec tincidunt. Sed tellus arcu, posuere vitae nulla eu, pellentesque feugiat mi. Phasellus lectus enim, tincidunt nec dui eu, congue egestas augue.</p>
<p>Praesent eget purus suscipit, placerat purus ac, lacinia metus. Curabitur placerat facilisis augue, non sagittis ipsum dictum et. Mauris luctus et risus vel laoreet. Maecenas tempor ipsum a massa gravida auctor. Nunc nec massa sed urna aliquet posuere ut nec augue. Integer lacus nisi, ultricies at neque id, vestibulum suscipit lorem. Vestibulum efficitur arcu vitae magna bibendum gravida. Ut purus lorem, vestibulum quis ipsum eu, efficitur suscipit ligula. Sed nec urna libero. Pellentesque ullamcorper turpis non ullamcorper pulvinar. Nullam vestibulum, dui a congue venenatis, nibh sem tempus urna, non dapibus ligula orci et diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis lobortis est, eget convallis est cursus at. Ut id ullamcorper dolor.</p>
<p>Sed nisl lorem, sodales sed pretium et, consectetur sollicitudin mi. Etiam sed urna tempor, fermentum sapien ut, euismod nisi. Aliquam erat volutpat. Phasellus at ipsum ut odio convallis molestie. Integer ultricies ornare leo ac tempus. Mauris accumsan bibendum dapibus. Integer quis nunc vitae mauris eleifend dictum ut non velit. Aliquam non lacus ut tellus fringilla auctor. Donec et pellentesque dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum semper maximus lacus, a hendrerit erat. Quisque felis magna, tincidunt eu enim non, consequat pharetra nunc. Pellentesque sodales nulla eu facilisis venenatis. Vestibulum quis tortor quis sapien tincidunt aliquam nec mattis enim.</p>
<p>Ut eget sagittis erat. Fusce euismod volutpat diam, non semper lorem congue accumsan. Proin malesuada erat id sodales scelerisque. Aliquam non quam ut magna rutrum commodo. Nulla facilisi. Aliquam erat volutpat. Aliquam erat volutpat. Integer a sem eu metus consectetur malesuada rutrum non magna.</p>
</article>
<aside>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
</aside>
<footer>
<p class="accent">Philip Blaine, Proprietor</p>
<p>45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</footer>
</div>
</body>
</html>
A white space appears above where the header should go, which should remain fixed at the top and follow as you scroll without overlap at the beginning. Then the "LR" is not applying any ruling at all.
Add top: 0; to your header in CSS. It should look like this:
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
top: 0;
}
Now you can see that the container has slipped a little. Therefore you could not give the container top: 6.2em; but approx. top: 7.5em;. At the end it should look like this:
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 6.2em;
}
Here is the full code:
/*
Lakeland Reeds Bed and Breakfast style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
*/
/* reset styles */
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
/* body and page container */
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 7.5em;
}
/* headings */
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
top: 0;
}
h1 {
padding: 0.4em;
color: white;
text-align: center;
}
h2 {
padding: 0.4em 0.6em;
}
p.logo {
padding: 0.2em;
border: 2px solid beige;
color: goldenrod;
position: absolute;
top: 2em;
left: 2em;
}
/* main content */
article {
width: 70%;
float: right;
top: 6.2em;
}
article p {
padding: 0 1em 1em;
}
/* sidebar */
aside {
width: 30%;
padding: 1em 0;
background-color: goldenrod;
}
aside p {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 0.4em 0;
margin: 0 0.6em;
}
/* footer section */
footer {
padding: 0.6em;
color: white;
background-color: darkgreen;
text-align: center;
clear: right;
}
footer p {
margin: 0.4em;
}
footer p.accent {
color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lakeland Reeds Bed & Breakfast - Test Page</title>
<!--
Lakeland Reeds Bed & Breakfast test page
Filename: longpage.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Lakeland Reeds<br>Bed & Breakfast</h1>
<p class=”logo”>ℒℛ</p>
</header>
<article>
<h2>Test Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra ullamcorper ultrices. Morbi egestas elementum ligula, eget congue elit pulvinar placerat. Curabitur dictum, velit et iaculis mattis, felis ante sodales lectus, consectetur convallis enim urna ut libero. Suspendisse placerat dignissim quam, et consequat ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id dolor ut nulla sodales lobortis in ac dolor. Maecenas bibendum eleifend lacus, maximus dignissim mi fermentum quis. Suspendisse sagittis tincidunt pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nunc velit, molestie nec metus vel, dictum rutrum est. Aliquam volutpat ex massa, tempus eleifend nisl eleifend sed. Fusce egestas cursus felis in fermentum. Mauris facilisis feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec feugiat erat nec sapien tincidunt congue. Etiam urna libero, aliquet ut neque a, vulputate fermentum velit.</p>
<p>Nullam vel enim luctus, imperdiet neque et, aliquet turpis. Morbi a rhoncus metus. Nulla facilisi. Nunc tincidunt vel eros id laoreet. Fusce id nibh rhoncus, porta nulla nec, euismod ligula. Phasellus bibendum mi lectus. Donec a egestas mauris.</p>
<p>Curabitur et sapien consequat, varius diam in, viverra massa. Aliquam erat volutpat. Vestibulum facilisis urna elit, vel malesuada mauris pulvinar vitae. In ultrices tortor nisl, et faucibus ex dignissim non. Vivamus eget risus tempus, rutrum ipsum sit amet, gravida mi. Vestibulum et lobortis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec ultricies risus quis metus cursus, in feugiat quam ultricies. Nullam sit amet enim in tellus molestie sodales et et leo. Duis pulvinar venenatis consequat. Aenean facilisis arcu libero, a auctor odio feugiat at. Donec sagittis sollicitudin maximus. Maecenas elementum, lectus vitae fringilla tempus, mi nibh faucibus sapien, in fermentum dui massa vel dui. Nullam sed ligula scelerisque, viverra quam sit amet, bibendum libero. Duis at fermentum dolor. Phasellus non dictum nulla. Morbi a semper nibh. Vivamus ullamcorper purus ac nisi consectetur bibendum. Nulla varius sodales tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur imperdiet neque nec purus pellentesque, vitae convallis libero accumsan. Praesent semper lacus in tellus eleifend, et tristique lorem egestas.</p>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
<p>Aenean eu ipsum eros. Aenean faucibus sollicitudin mi, vel ullamcorper nisi porttitor a. Suspendisse potenti. Mauris facilisis eu neque id dignissim. Pellentesque nunc enim, feugiat ac orci vel, bibendum tincidunt sem. Vivamus placerat finibus ultricies. Curabitur ac fringilla diam.</p>
<p>Integer mi nibh, accumsan fringilla consectetur eu, scelerisque nec ipsum. Nullam in bibendum risus. Integer fringilla enim ac diam sollicitudin, eget elementum odio accumsan. Aliquam efficitur congue ante volutpat lacinia. Nam et ante eu arcu bibendum mollis. Morbi elementum mauris tristique ullamcorper dictum. Vestibulum ultrices, nibh vel tristique lacinia, massa orci feugiat nisi, nec mattis libero sem sit amet sem. Curabitur in leo quis sapien porta blandit sit amet sed felis. Proin et diam nisi. Sed quis sapien quis lectus molestie imperdiet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam euismod arcu molestie, congue felis non, placerat lacus. Proin semper nisi non posuere porttitor. Donec turpis ipsum, tincidunt in pellentesque in, accumsan at ipsum. Fusce rhoncus auctor sem sed fringilla. Sed sodales lorem rhoncus nunc blandit vestibulum. Vestibulum convallis egestas maximus. Donec porta velit ipsum, porttitor condimentum ipsum cursus nec. In hac habitasse platea dictumst. In volutpat gravida iaculis. In porttitor mattis eros, et feugiat lectus pulvinar ut. Vestibulum vel libero at justo posuere tristique et in mauris. Duis condimentum lacinia luctus. Mauris ut cursus lacus, pellentesque efficitur metus. Nunc gravida, ex cursus commodo hendrerit, arcu metus scelerisque ligula, eu lacinia felis massa blandit diam. Pellentesque ac consequat est.</p>
<p>Cras volutpat vitae ipsum non molestie. Aliquam id risus quam. Aenean malesuada dui sed est suscipit varius. Morbi maximus diam luctus tempus mattis. In sit amet pulvinar eros, non imperdiet neque. Nullam suscipit tortor risus, pellentesque molestie tortor pharetra vel. Proin quis malesuada lacus. Sed pharetra scelerisque leo. Praesent accumsan at ipsum eu rutrum. Nam fermentum velit quis arcu ullamcorper maximus. Pellentesque blandit vehicula libero, eget sagittis est imperdiet et. Curabitur nisl eros, consequat vel tellus vehicula, pulvinar porta tellus.</p>
<p>Integer porttitor placerat fringilla. Proin eleifend in nulla in commodo. Etiam a dictum dui. Aliquam faucibus massa in lacinia fermentum. Nunc placerat condimentum tortor, sit amet varius mauris pretium quis. In non arcu dolor. Praesent venenatis sed sem eleifend consectetur. In ex mi, vestibulum non interdum et, luctus vel sem. Duis eu diam a tellus bibendum elementum.</p>
<p>Praesent condimentum sem eget magna consequat, eget gravida libero elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a posuere metus. Nullam tellus justo, venenatis sit amet arcu eu, venenatis vulputate neque. Etiam vestibulum orci quis mauris lacinia, et blandit arcu imperdiet. Vestibulum aliquam scelerisque justo, tincidunt congue orci convallis a. Ut facilisis arcu non orci interdum, sit amet facilisis mi consequat. Cras sed venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pharetra a sapien non ultrices. Donec finibus nulla quis purus ullamcorper, sit amet accumsan sem blandit. Ut tempus justo quis nulla viverra iaculis. In placerat turpis sit amet quam tincidunt, eget lobortis dui imperdiet. Fusce a malesuada ligula, et dapibus dolor. Maecenas euismod dui nec mauris fermentum fringilla.</p>
<p>Mauris dui lectus, luctus et auctor mollis, luctus fringilla dui. Duis pharetra massa id arcu imperdiet mollis. Nam ornare efficitur gravida. Sed ultrices nibh nisi, ut maximus purus aliquam et. In dignissim ut tortor nec tincidunt. Sed tellus arcu, posuere vitae nulla eu, pellentesque feugiat mi. Phasellus lectus enim, tincidunt nec dui eu, congue egestas augue.</p>
<p>Praesent eget purus suscipit, placerat purus ac, lacinia metus. Curabitur placerat facilisis augue, non sagittis ipsum dictum et. Mauris luctus et risus vel laoreet. Maecenas tempor ipsum a massa gravida auctor. Nunc nec massa sed urna aliquet posuere ut nec augue. Integer lacus nisi, ultricies at neque id, vestibulum suscipit lorem. Vestibulum efficitur arcu vitae magna bibendum gravida. Ut purus lorem, vestibulum quis ipsum eu, efficitur suscipit ligula. Sed nec urna libero. Pellentesque ullamcorper turpis non ullamcorper pulvinar. Nullam vestibulum, dui a congue venenatis, nibh sem tempus urna, non dapibus ligula orci et diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis lobortis est, eget convallis est cursus at. Ut id ullamcorper dolor.</p>
<p>Sed nisl lorem, sodales sed pretium et, consectetur sollicitudin mi. Etiam sed urna tempor, fermentum sapien ut, euismod nisi. Aliquam erat volutpat. Phasellus at ipsum ut odio convallis molestie. Integer ultricies ornare leo ac tempus. Mauris accumsan bibendum dapibus. Integer quis nunc vitae mauris eleifend dictum ut non velit. Aliquam non lacus ut tellus fringilla auctor. Donec et pellentesque dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum semper maximus lacus, a hendrerit erat. Quisque felis magna, tincidunt eu enim non, consequat pharetra nunc. Pellentesque sodales nulla eu facilisis venenatis. Vestibulum quis tortor quis sapien tincidunt aliquam nec mattis enim.</p>
<p>Ut eget sagittis erat. Fusce euismod volutpat diam, non semper lorem congue accumsan. Proin malesuada erat id sodales scelerisque. Aliquam non quam ut magna rutrum commodo. Nulla facilisi. Aliquam erat volutpat. Aliquam erat volutpat. Integer a sem eu metus consectetur malesuada rutrum non magna.</p>
</article>
<aside>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
</aside>
<footer>
<p class="accent">Philip Blaine, Proprietor</p>
<p>45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</footer>
</div>
</body>
</html>
I have a simple page in which I want a sticky header and a sticky sidebar. Here is a fiddle and here is the same code:
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
The sticky header works fine.
The sticky sidebar does not work. The sidebar is in a containing element that sets the CSS grid, and is centered with a max-width. I have read that sticky sticks to its nearest scrolling ancestor, so I assume this is not working because the body is scrolling and not the container div, but I'm not sure what to do about this.
If I do something like height: 100px on the container div I end up with a scrollbar on that div rather than the body. I want the scroll on the body.
If I used a fixed position on the sidebar, the grid breaks (the content div now spans 100% of the container) and I would have to know the height of the top sticky bar in order to set the offset on the scrollbar. If the height of the top bar varies this won't work.
What is the solution to this?
You can add align-self: flex-start to override the default stretch behaviour of sidebar( because it is a grid item)
Now you can explicitly set 100vh height to the sidebar - see demo below without grid-gap and / or margin or padding
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
/*grid-gap: 50px;*/
grid-template-columns: max-content 1fr;
/* margin-top: 50px;*/
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: 100vh; /* set a fixed height */
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
Adding back the grid-gap, margin and padding - you can adjust the explicit height set on the sidebar - see demo below:
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: calc(100vh - 30px); /* set a fixed height */
padding-top: 20px;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
I'm trying to create a simple modal (popup) window, with the fewer lines of code posible... as basic as possible.
The modal's maximum width is 650px and the height should fit the content. If the content overflows, then the scrollbar takes over.
The following code works perfectly on Chrome. But on Firefox and IE Edge, the modal NEVER fits the content window... it is always 100% height. Why?
HTML
<a href="#" data-modal>open modal here</a>
<div class="modal">
<div class="modal-close">CLOSE</div>
<div class="modal-content">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus pulvinar. Sed tincidunt felis lorem, et semper mi venenatis at. Vivamus eu tincidunt quam. Donec nec interdum neque. Vivamus in porta diam, quis ultrices orci. Morbi vitae
consectetur lectus. Nam eu commodo augue, vitae porttitor turpis. Donec vitae suscipit elit. Maecenas euismod leo eros, sed luctus nisi vestibulum ac. Curabitur dui eros, ornare eu purus ut, viverra auctor neque. Etiam neque enim, condimentum
et aliquam eget, sagittis at ligula. In risus justo, elementum ac tellus id, egestas consequat odio. Maecenas tortor ipsum, porta ornare sapien eu, lobortis pellentesque urna. Sed vel dictum massa, iaculis bibendum orci. Vestibulum at libero dui.
Suspendisse nec nisi quis dui ornare sagittis. Fusce nec congue neque. Proin ullamcorper neque vel est mattis, id ullamcorper metus elementum. Proin vitae odio tincidunt, semper ipsum in, aliquet ex. Aliquam sit amet auctor leo. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis mi ut sem ultricies commodo. Sed efficitur molestie luctus. Sed lacinia leo orci, mollis dignissim sapien lacinia quis. In ac nulla in diam mattis scelerisque.
Integer eget ipsum turpis. In quis egestas quam, quis ultricies quam. Etiam volutpat posuere massa sed vehicula. Vestibulum condimentum arcu libero, sed commodo lacus facilisis id. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Maecenas vulputate accumsan nulla. Aliquam leo leo, facilisis sed diam in, cursus suscipit nibh. Donec gravida tellus id iaculis facilisis. Aliquam ut ultricies urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut viverra, orci
ac consectetur sagittis, arcu nibh faucibus odio, et iaculis mauris nunc vel libero. Praesent venenatis massa molestie massa malesuada fringilla. Maecenas pharetra dapibus neque, id tincidunt risus commodo luctus. Nulla interdum euismod sapien,
non iaculis tortor rutrum efficitur. Duis mi est, accumsan eu ex eleifend, vulputate vehicula ex. In lacinia felis id aliquam semper. Fusce interdum vestibulum dignissim. Nullam condimentum felis dui, a ultrices tortor fringilla at. Aliquam auctor
magna sit amet aliquam porttitor. Vivamus malesuada aliquam augue a accumsan. Aenean vulputate felis felis, sed interdum nisl aliquam ut. Suspendisse vitae felis interdum, sagittis nisi ut, luctus diam. Integer tempor erat ac lectus tempus convallis.
Curabitur at sollicitudin neque. Vivamus molestie cursus nulla malesuada dictum. Sed ornare ligula eu diam hendrerit consectetur ut eget metus.</p>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.modal {
display: none;
z-index: 700;
position: fixed;
/* center */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* end- center */
width: calc(100vw - 40px);
max-width: 650px;
height: fit-content;
max-height: calc(100vh - 40px);
overflow: auto;
padding: 40px 20px;
border: 10px solid #000;
background-color: #fff;
}
.modal-close {
position: absolute;
z-index: 700;
top: 10px;
right: 10px;
}
https://jsfiddle.net/97khd8ad/18/
The fit-content keyword is experimental and is not currently supported outside of Chrome (https://developer.mozilla.org/en-US/docs/Web/CSS/height) but you can achieve the same effect by positioning the element at 50% from top and then offsetting it by half its height:
* {
box-sizing: border-box;
}
.modal {
z-index: 700;
position: fixed;
/* center */
left: 0;
right: 0;
top: 50%; /* position half way from top */
transform: translateY(-50%); /* offset by half the element's height */
margin: auto;
/* end- center */
width: calc(100vw - 40px);
max-width: 650px;
max-height: calc(100vh - 40px);
overflow: auto;
padding: 40px 20px;
border: 10px solid #000;
background-color: #fff;
}
.modal-close {
position: absolute;
z-index: 700;
top: 10px;
right: 10px;
}
<div class="modal">
<div class="modal-close">CLOSE</div>
<div class="modal-content">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus pulvinar. Sed tincidunt felis lorem, et semper mi venenatis at.
<!-- UNCOMMENT TO SEE THE OVERFLOW SCROLL WORKING
Vivamus eu tincidunt quam. Donec nec interdum neque. Vivamus in porta diam, quis ultrices orci. Morbi vitae
consectetur lectus. Nam eu commodo augue, vitae porttitor turpis. Donec vitae suscipit elit. Maecenas euismod leo eros, sed luctus nisi vestibulum ac. Curabitur dui eros, ornare eu purus ut, viverra auctor neque. Etiam neque enim, condimentum
et aliquam eget, sagittis at ligula. In risus justo, elementum ac tellus id, egestas consequat odio. Maecenas tortor ipsum, porta ornare sapien eu, lobortis pellentesque urna. Sed vel dictum massa, iaculis bibendum orci. Vestibulum at libero dui.
Suspendisse nec nisi quis dui ornare sagittis. Fusce nec congue neque. Proin ullamcorper neque vel est mattis, id ullamcorper metus elementum. Proin vitae odio tincidunt, semper ipsum in, aliquet ex. Aliquam sit amet auctor leo. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis mi ut sem ultricies commodo. Sed efficitur molestie luctus. Sed lacinia leo orci, mollis dignissim sapien lacinia quis. In ac nulla in diam mattis scelerisque.
Integer eget ipsum turpis. In quis egestas quam, quis ultricies quam. Etiam volutpat posuere massa sed vehicula. Vestibulum condimentum arcu libero, sed commodo lacus facilisis id. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Maecenas vulputate accumsan nulla. Aliquam leo leo, facilisis sed diam in, cursus suscipit nibh. Donec gravida tellus id iaculis facilisis. Aliquam ut ultricies urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut viverra, orci
ac consectetur sagittis, arcu nibh faucibus odio, et iaculis mauris nunc vel libero. Praesent venenatis massa molestie massa malesuada fringilla. Maecenas pharetra dapibus neque, id tincidunt risus commodo luctus. Nulla interdum euismod sapien,
non iaculis tortor rutrum efficitur. Duis mi est, accumsan eu ex eleifend, vulputate vehicula ex. In lacinia felis id aliquam semper. Fusce interdum vestibulum dignissim. Nullam condimentum felis dui, a ultrices tortor fringilla at. Aliquam auctor
magna sit amet aliquam porttitor. Vivamus malesuada aliquam augue a accumsan. Aenean vulputate felis felis, sed interdum nisl aliquam ut. Suspendisse vitae felis interdum, sagittis nisi ut, luctus diam. Integer tempor erat ac lectus tempus convallis.
Curabitur at sollicitudin neque. Vivamus molestie cursus nulla malesuada dictum. Sed ornare ligula eu diam hendrerit consectetur ut eget metus.--></p>
</div>
</div>
</div>
I have a problem with my html code I refer to the id class but it is not going to there, but to another rule. I think the problem have to do with the fixed header, but I can't find the solution for this. This is my html code:
/* general */
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
margin: 0;
height: 100%;
position: relative;
}
/* header */
header {
position: fixed;
z-index: 2;
top: 0;
background-color: red;
width: 100%;
height: 125px;
padding: 1em;
}
.spacer {
position: relative;
width: 100%;
height: calc(125px + 2em);
}
header h1 {
margin: 0;
}
/* bar */
header p {
margin-bottom: 0;
}
/*menu*/
header li {
float: left;
display: block;
background-color: white;
padding: 2px;
list-style-type: none;
margin-top: 0 !important;
margin: 1em;
}
/* middle */
.middle {
left: 0;
float: left;
padding: 2em 4em;
background-color: lightgreen;
}
.middle p {
margin: 0;
}
<header>
<h1> HTML </h1>
<p>On the menu today:</p>
<ul>
<li>Number 1
</li>
<li>Number 2
</li>
<li>Number 3
</li>
<li>Number 4
</li>
</ul>
</header>
<div class="spacer"> </div>
<div class="middle">
<p id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
amet, elementum nisi.
<br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
<br>
<p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
<br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
<br>
<br>
<br>
<p id="3">
Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
</p>
<br>
<p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
<br>
</p>
</div>
<footer>
</footer>
Your spacer div appears to be sitting on top of your header. If you give your header a z-index the links work again:
/* general */
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
margin: 0;
height: 100%;
position: relative;
}
/* header */
header {
position: fixed;
top: 0;
background-color: red;
width: 100%;
height: 125px;
padding: 1em;
z-index:2;
}
.spacer {
position: relative;
width: 100%;
height: calc(125px + 2em);
}
header h1 {
margin: 0;
}
/* bar */
header p {
margin-bottom: 0;
}
/*menu*/
header li {
float: left;
display: block;
background-color: white;
padding: 2px;
list-style-type: none;
margin-top: 0 !important;
margin: 1em;
}
/* middle */
.middle {
left: 0;
float: left;
padding: 2em 4em;
background-color: lightgreen;
}
.middle p {
margin: 0;
}
<header>
<h1> HTML </h1>
<p>On the menu today:</p>
<ul>
<li>Number 1
</li>
<li>Number 2
</li>
<li>Number 3
</li>
<li>Number 4
</li>
</ul>
</header>
<div class="spacer"> </div>
<div class="middle">
<p id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
amet, elementum nisi.
<br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
<br>
<p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
<br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
<br>
<br>
<br>
<p id="3">
Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
</p>
<br>
<p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
<br>
</p>
</div>
<footer>
</footer>
They are scrolling to the right place, the only problem is they are going under the Red Header, so you see the wrong one, You can rectify this by increasing the spacer's height depending on which link is clicked. Hope this helps.
Updated : The solution can be found here as "codepen.io/ukneeq/pen/zsKIH"
I am making a website in which I have a fixed position menu bar on the left side, a fixed position menu on the top and a scrolling area on the right for the main content of the page. The issue I am having is that the text scrolls over the top menu as such:
Before Scrolling:
After Scrolling
Here is my current code (home.php):
<style>
#heading{margin-top:50px;}
#left {
width: 20%;
height: 100%;
position: fixed;
margin-top:50px;
outline: 1px solid;
background-color:#D6EBEB
}
#right {
width: 80%;
height: auto;
padding-top:50px;
position: absolute;
right: 0;
}
</style>
<?php
//IncludeHeader
include_once 'includes/header.php';
?>
<div id="right">
<legend><h1 align="center" class="text-info" >Home Page</h1></legend>
<h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum porttitor, mollis diam sit amet, elementum enim. Nunc eleifend dui eu augue condimentum sollicitudin. Sed vel tristique lacus. Morbi rutrum dui at pellentesque blandit. Praesent congue, turpis eget luctus posuere, dui mi bibendum sem, vitae hendrerit purus lectus nec lorem. Cras non porttitor nulla. Praesent mollis nec urna ac laoreet. Curabitur at ipsum a ante iaculis fermentum. Sed ut sagittis velit, ac tincidunt purus. Suspendisse auctor mauris nibh, feugiat pretium felis ultrices quis. Sed rutrum finibus bibendum. Mauris sagittis leo at mollis efficitur. Cras eu finibus eros, nec accumsan lorem. Nulla consequat lacus quis massa sagittis egestas. Nam at orci pharetra, commodo nibh eget, venenatis dui. Donec orci tellus, egestas ut leo eget, accumsan hendrerit felis.
Sed ultrices, nisi vel mattis condimentum, nunc dui fringilla felis, at facilisis massa turpis eu lacus. Morbi lectus urna, vehicula in consectetur posuere, egestas sit amet mauris. Donec nisi leo, luctus id tristique non, ultrices quis purus. Cras quis convallis tortor, sit amet laoreet odio. Donec aliquet ipsum eu fringilla accumsan. Integer gravida orci in laoreet tristique. Maecenas scelerisque leo non felis malesuada, quis commodo mauris porttitor. Aliquam ut commodo risus. Integer condimentum ipsum id maximus pretium.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc non aliquam lorem, sit amet mollis tellus. Aenean vulputate quam nibh, vitae congue dolor lacinia ut. Nunc pharetra ligula turpis, vitae congue felis sollicitudin non. Duis ut justo sit amet nulla dictum commodo et non elit. Morbi varius metus massa, nec fermentum sapien blandit a. Curabitur at lectus sapien. Praesent at lectus nec nulla convallis efficitur blandit nec dui. Duis sed est placerat orci fringilla pellentesque commodo et sem. Sed viverra sem eget pretium ultricies. Duis a diam eget sapien tincidunt dignissim nec sed quam. In ultricies tincidunt sapien id blandit. In ut justo non turpis commodo gravida. Phasellus auctor venenatis ante, interdum fermentum lacus venenatis sit amet. Vivamus nisl lorem, posuere a vulputate quis, placerat ut mi. Vestibulum facilisis bibendum nunc, vitae blandit purus.
Sed eget orci lectus. Sed egestas risus nibh, vel semper metus accumsan nec. Cras gravida diam vitae lorem vestibulum viverra. Vivamus mollis condimentum vehicula. Nullam mauris est, laoreet sit amet suscipit ac, interdum a massa. Suspendisse aliquam mollis arcu non malesuada. Quisque tellus erat, lacinia in augue vitae, mattis vulputate dolor. Donec ultricies vel augue non fermentum. Nulla et convallis urna, quis ultrices quam. Sed urna ipsum, porta sed dapibus sed, commodo eu lorem. Proin tempor neque ut nulla varius lacinia et id nunc. Nunc condimentum porta tellus eu suscipit. Ut convallis turpis sed diam gravida, a blandit tortor dictum.
In et aliquet justo. Proin id leo aliquet nibh elementum volutpat tincidunt malesuada est. In vehicula eleifend ante, at tincidunt nisl lobortis quis. Sed gravida scelerisque est egestas consequat. Curabitur fringilla, enim quis ornare laoreet, sapien nulla bibendum lacus, vel malesuada felis dui viverra enim. Praesent varius dictum nulla. Pellentesque eu gravida velit. Vivamus auctor arcu lectus, et placerat dolor molestie id. Aliquam leo lacus, consequat fermentum porta sed, imperdiet a nibh. Aliquam rutrum nunc sit amet lacus auctor, eu sollicitudin erat auctor. Nullam at rhoncus turpis. Aenean venenatis quam ut tellus gravida, vel suscipit tellus auctor.
Nulla facilisi. Aliquam id condimentum sapien, vel laoreet justo. Nullam erat odio, facilisis a velit eget, consequat laoreet velit. Vivamus dictum sit amet nibh finibus pharetra. Aliquam et nibh vitae massa scelerisque dapibus. Etiam ultrices, tellus eget dapibus scelerisque, augue dolor faucibus quam, sed gravida nunc eros ac dolor. Donec eu metus nec mauris lobortis condimentum sed ac libero. Nullam sit amet nulla euismod, pharetra libero nec, molestie sapien. Mauris gravida placerat est, vitae imperdiet orci lobortis in. Nulla vitae vehicula sem. Vestibulum nec sagittis mauris.
Nulla pharetra ligula nec arcu porta, vel elementum tortor malesuada. Vestibulum metus urna, egestas a viverra eu, convallis at ex. Donec elit elit, maximus ut odio at, tempus interdum erat. In pharetra commodo mi id vestibulum. Sed tristique dui ut elit lacinia feugiat. Quisque vitae ante rutrum ante luctus scelerisque. In hac habitasse platea dictumst. Quisque metus magna, lacinia a orci et, volutpat mattis nisi. </h4>
<br/>
</div>
Here is the header.php code:
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<?php /* Check for set Name */ if (!$fname) { $fname = 'Please Sign In'; } ?>
<Style>
#nav{ background-color: #222; position: fixed; width: 100%; top: 0; }
#nav ul{ list-style-type: none; padding: 0; margin: 0; text-align="right";}
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a,visited{ color: #CCC; display: block; padding: 15px; text-decoration: none; }
#nav-wrapper
{
width:100%;
margin: 0 auto;
padding-right:10px;
}
</Style>
<div id="nav">
<div id="nav-wrapper">
<ul>
<li style="color: white; text-align:left;">Home</li>
<li style="color: white; text-align:right;margin-left:85%;"><?php echo $fname;?></li>
</ul>
</div>
</div>
Thanks for any help or suggestions as to why this is happening and how it can be fixed!
You have applied the Right Column as absolute position but it should be static.
Try removing position:absolute and add like belw
#right {
width: 80%;
height: auto;
padding-top:50px;
float:right;
}