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>
This question already has answers here:
Creating a variable height "fixed" header in CSS with scrollable content
(5 answers)
Closed 3 years ago.
I am making a basic website with a sticky Navigation Bar, When I add text to the website, the top rows are hidden behind the Navbar. Is there any way for me to position the text to start below a certain pixel, or something like that?
Obviously I can just spam p tags until it works, But since this will be a reoccurring problem I would like to know how to fix it properly.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.navbar {}
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis
ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis
sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem
gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum
ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc. Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien
dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem
sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare. Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit
tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi
varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique
sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p>
</div>
You just add this CSS in your code.
.content{
margin-top: 40px;
}
Maybe a padding. This is what I do.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.content {
width: 100%;
position: relative;
float: left;
padding-top: 40px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis
ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis
sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem
gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum
ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc. Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien
dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem
sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare. Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit
tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi
varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique
sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p>
</div>
Margin-top u have to give
<!DOCTYPE html>
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.navbar {
}
.content{
margin-top:
55px
}
</style>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc.
Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare.
Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p></div>
</body>
</html>
I'm struggling with some css.
I'd need a "backdrop" effect on a div that is positioned absolutely and has overflow scroll.
Unfortunately I can not change the structure of the html, so I am pretty limited. Therefore I'm not 100% sure if it can work.
Here is an example:
#feed {
left: 0;
top: 0;
position: relative;
display: block;
width: 100%;
height: 100%;
contain: layout size style;
position: absolute;
}
#scroll-content {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
display: block;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
contain: size style layout;
}
.backdrop {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.22);
z-index: 9;
}
<div id="feed">
<div id="scroll-content">
<div class="backdrop"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In aliquam sem fringilla ut morbi. Magna etiam tempor orci eu lobortis elementum nibh tellus. Tincidunt ornare massa eget egestas.
Faucibus interdum posuere lorem ipsum dolor sit amet. Velit sed ullamcorper morbi tincidunt ornare massa. Congue nisi vitae suscipit tellus mauris a diam maecenas. A diam maecenas sed enim ut sem viverra aliquet eget. Amet nulla facilisi morbi tempus
iaculis urna id volutpat lacus. Hendrerit gravida rutrum quisque non tellus orci ac. At risus viverra adipiscing at in tellus integer. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Tristique nulla aliquet enim tortor at
auctor. Convallis tellus id interdum velit laoreet.
</p>
<p>
Ullamcorper a lacus vestibulum sed arcu. Pellentesque nec nam aliquam sem et. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Ridiculus mus mauris vitae ultricies. Euismod nisi porta lorem mollis aliquam ut porttitor leo a. Arcu vitae elementum
curabitur vitae nunc sed. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Turpis egestas integer eget aliquet nibh praesent tristique magna. Eget dolor
morbi non arcu risus quis. Fermentum posuere urna nec tincidunt praesent semper. Aenean vel elit scelerisque mauris pellentesque pulvinar. Eget dolor morbi non arcu risus quis varius quam quisque. Arcu non odio euismod lacinia at. Risus nec feugiat
in fermentum posuere urna nec tincidunt. In ornare quam viverra orci. Sed viverra tellus in hac habitasse. Gravida cum sociis natoque penatibus et magnis dis. Id diam maecenas ultricies mi eget. Et netus et malesuada fames.
</p>
<p>
Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Urna neque viverra justo nec ultrices dui. In metus vulputate eu scelerisque. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. Eu ultrices vitae auctor eu augue
ut. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Bibendum neque egestas congue quisque egestas diam. Quis auctor elit sed vulputate mi sit amet. Quis hendrerit dolor
magna eget est lorem ipsum dolor. Aliquet lectus proin nibh nisl condimentum id venenatis a condimentum. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Sodales neque sodales ut etiam. Dolor sit amet consectetur adipiscing elit.
In pellentesque massa placerat duis ultricies lacus. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Vestibulum morbi blandit cursus risus at ultrices. Varius quam quisque id diam. Magna sit amet purus gravida quis blandit. Facilisi
nullam vehicula ipsum a arcu cursus vitae congue mauris.
</p>
<p>
Laoreet non curabitur gravida arcu ac. Penatibus et magnis dis parturient. Sit amet venenatis urna cursus. Porta lorem mollis aliquam ut porttitor leo a diam. Vulputate dignissim suspendisse in est ante in nibh mauris. Sed sed risus pretium quam. Massa
tempor nec feugiat nisl pretium fusce id velit. Ut sem viverra aliquet eget sit amet tellus cras. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. In ornare quam viverra orci sagittis eu. Massa sapien faucibus et molestie ac feugiat sed
lectus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus.
</p>
</div>
</div>
As you can see, when you scroll on the scroll-content div, the backdrop doesn't scroll with it, is it possible to have the backdrop scroll with the content, or at least cover the entire content?
Thank you
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;
}
BOTH HTML/BODY 100% SOLUTION
html, body { height : 100% }
This works, no doubt. Both elements will take up the full screen, perfect.
Why not use? vh-instead? Well that has to do with mobile Safari, there is a big difference between 100% taking up the visible space and 100vh taking the view height making it larger then the toolbar, not desired in my case.
There is just one big problem with this approach. If the content within the body takes up more then 100% of the visible height, like in most cases, it will overflow. This might not be a big problem, besides it feeling hacky, however it does break -webkit-sticky to not stick elements further then the body container.
MIN-HEIGHT TO THE RESCUE, NOT QUITE
So actually what we want is to say, hey HTML and BODY be at least 100%. That would solve all our problems because that's exactly what we want. Luckily there is a property for that min-height.
html, body { min-height : 100% }
If they are both at least 100% of the viewport it should work, but it doesn't.
PROPOSED SOLUTION
html {
height : 100%;
}
body {
min-height : 100%;
}
This does make the height of the body the viewport height, however all the children elements do not recognize this, for example:
HTML Source
<head>
<title>Body Height Problem</title>
</head>
<body>
<div class="fullheight-cover">
Some beautiful image with the CSS background.
</div>
<section class="content">
Some content in section A.
</section>
<section class="content">
Some content in section B.
</section>
</body>
</html>
CSS Source
html,
body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: red;
}
.fullheight-cover {
min-height: 100%;
background: green;
}
(Codepen: http://codepen.io/anon/pen/pbGWBq)
If you inspect the elements you will notice that the body will now have a height, which is awesome. However you expect .fullheight-cover to fill up this space with it's height being minimal 100% as well, but this does not work.
How can I make it so that the children of the body can make use of the 100% height that flows naturally?
Check this. Im added display: flex to body, and width: 100% to .content
html,
body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: red;
display: flex;
}
.content {
width: 100%;
min-height: 100%;
background: green;
}
<html>
<head>
<title>Body Height Problem</title>
</head>
<body>
<div class="content">
Some sample content.
</div>
</body>
</html>
Hey I can help you with a solution
you can fix this template with css alone, Its better to use css rather than js.
This is a sample template please go through it.
SOLUTION
The html is..
<html>
<link rel="stylesheet" href="style.css"/>
<body>
<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>
</body>
</html>
CSS is..
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}
Try this it will suits you the best way
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
overflow:auto;
overflow:auto;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}
<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>
Try this
<div style="overflow: hidden;">
<div style="background: green; float: left; padding-bottom: 20000px; margin-bottom: -20000px; width: 30%">Column 1st</div>
<div style="background: red; padding-bottom: 20000px; margin-bottom: -20000px; float: left; width:70%">Column 2nd<br/>Your text text text<br/>Other text text and something other text</div>
</div>