Currently, I have a nav element floated left and a div floated right. How would I make each of them have an independent scroll bar, i.e. so they don't scroll in sync? I've tried adding overflow-y: auto to both without any success. FYI, I'm using Tailwind CSS.
Here's a quick example using flex
The complex interactions of float and overflow are well documented and were often used as a clearfix for floated layouts.
Since you're using Tailwind you should definitely be leveraging their flexbox or grid template styles for what you are describing.
Tailwind example:
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="w-screen h-screen flex flex-row">
<nav class="bg-gray-600 w-1/4 flex-none p-4 overflow-y-scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</nav>
<div class="bg-green-600 w-3/4 flex-none p-4 overflow-y-scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</div>
</div>
Plain CSS example:
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
}
nav {
background-color: gray;
overflow-y: scroll;
flex-basis: 25%;
padding: 1rem;
}
#right {
background-color: green;
overflow-y: scroll;
flex-basis: 75%;
padding: 1rem;
}
<div class="container">
<nav>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</nav>
<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</div>
</div>
I like to do that with flex. The key is to set min-h-0 on the flex parent. Otherwise, it will just grow with the children and then the whole body will start scrolling. In this example it will also have individual scroll bars on the x-axis if needed.
Note that the inline style on the p tag is just to give some large content to the sidebar and the main area.
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex h-screen w-screen min-h-0 min-w-0">
<aside class="h-full w-64 bg-teal-900 text-white border-r overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</aside>
<main class="h-full flex-1 overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</main>
</div>
It becomes more challenging when you want to have something on top or below like a navbar and footer. This is where you really need the minimum height.
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex flex-col h-screen w-screen min-h-0 min-w-0">
<nav class="p-1 border-b bg-gray-200">navbar</nav>
<section class="flex flex-1 min-h-0 min-w-0">
<aside class="h-full w-64 bg-teal-900 border-r overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</aside>
<main class="flex-1 h-full overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</main>
</section>
</div>
Related
I have a requirement to show image with a text together on same column where they both share same width. By default, text size will exceed image size if text is big enough. I manage to solve the issue by giving max-width style to span with some javascript code. I wonder is there a way to solve this issue without some Javascript black magic?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="d-flex flex-column align-items-center">
<!-- LONG ASS TEXT START -->
<span class="flex-grow-1 flex-shrink-1 text-break"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a nisi aliquet, tempus felis non, sollicitudin erat. Phasellus dapibus lobortis magna, at maximus dui tincidunt sit amet. Suspendisse fringilla gravida velit, id pharetra libero semper in. Proin in lacus dui. In ultricies suscipit tortor, vel pharetra arcu efficitur non. Donec sed quam tellus. Maecenas lacinia vehicula mauris, eget facilisis metus elementum ut. Aliquam ullamcorper nisl non nunc fermentum pellentesque. Sed at pretium ligula. Quisque sit amet metus porta, scelerisque ligula nec, vulputate tortor. Curabitur blandit, tellus efficitur sollicitudin imperdiet, risus quam molestie risus, a mattis orci mauris bibendum velit. Curabitur volutpat porttitor enim ut fringilla. Nunc sit amet odio bibendum, tempus nulla vulputate, cursus nisl. Praesent tincidunt turpis ac risus ultrices mollis. Phasellus ipsum arcu, pharetra ut lectus luctus, sollicitudin pretium purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sagittis maximus ex, in dapibus tellus rhoncus at. Etiam id vestibulum arcu. Aenean sed hendrerit dui, et vehicula mi. Donec posuere sapien ac bibendum lobortis. Phasellus dignissim tempus ante, id tincidunt dolor consequat ut. Morbi aliquam porttitor condimentum. Aenean auctor libero erat, pretium facilisis lacus pharetra id. Etiam ipsum enim, faucibus eu felis id, pharetra blandit lectus. Integer ut metus ac odio bibendum egestas. Suspendisse potenti. Aenean ut feugiat mi. Vestibulum commodo massa dolor, ut tincidunt diam posuere at. Ut quis vehicula nulla, in imperdiet erat. Duis sed eleifend magna. Donec vulputate, lectus vel convallis aliquam, odio justo semper odio, a vulputate ante mauris non nisl. Sed sollicitudin tortor sit amet porta vehicula. Fusce sodales lorem eu dolor sodales, eu scelerisque nisl imperdiet. Duis hendrerit ligula sed tellus finibus dignissim. Proin vitae nibh dictum lorem accumsan finibus sed quis est. In est metus, euismod aliquet posuere a, laoreet ut urna. Nullam nec mauris a metus blandit lobortis. Aenean sed volutpat dolor. Curabitur tristique ligula magna, non elementum orci suscipit rutrum. In efficitur tortor ut enim commodo, sed consequat lacus varius. Morbi lectus ante, suscipit nec metus egestas, iaculis semper nisi. Nam a faucibus arcu, sit amet blandit nulla. Ut leo risus, suscipit id rhoncus et, posuere vitae diam. Cras et porttitor nibh, vel ornare lacus. Etiam nec lectus nunc. Maecenas scelerisque purus sed ex gravida volutpat. Nam vehicula tortor diam, et eleifend orci maximus accumsan. Donec gravida turpis ut interdum rutrum. Phasellus non lobortis quam. Sed quis laoreet lectus. Curabitur eu faucibus massa. Fusce feugiat arcu nec ante ultricies vulputate. Mauris gravida finibus nisl. Fusce suscipit blandit erat nec gravida. Vivamus auctor dapibus augue, sit amet porttitor diam tempor eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque condimentum eleifend posuere. Aliquam porttitor odio a tincidunt varius. Proin id semper orci. Suspendisse potenti. Aliquam fringilla laoreet cursus. Vestibulum dictum urna in sem elementum, sed lacinia eros tincidunt. </span>
<!-- LONG ASS TEXT END -->
<!-- IMAGE START -->
<img src="https://www.englishclub.com/images/esl-exams/toeic_office.jpg" class="img-fluid" alt="..."></div>
https://jsfiddle.net/p315wutg/
I've looked around on the internet and can't find what I want. I need to make a small Sidebar menu that sticks to the left side and is centered.
The only thing that I found was this:
`https://codepen.io/kemsly/pen/mJxwJg`
but its use too much js.
If you know any links or guides that I can follow, please don't hesitate to post them here, I would appreciate it so much.
Kind Regards,
Faziki.
For
sticking to left side: position:fixed
centered... take 50% of the view height and then deduct half the height of your sidebar div
working snippet below:
.floatingLeft {
position: fixed;
top: calc(50vh - 67px);
background: lightblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class='floatingLeft'>
<div class='icon blue'>
<h4 class='photoshop'>Photoshop</h4>
</div>
<div class='icon purple'>
<h4 class='aftereffects'>AfterEffects</h4>
</div>
<div class='icon green'>
<h4 class='dreamweaver'>DreamWeaver</h4>
</div>
<div class='icon red'>
<h4 class='flash'>Flash</h4>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet. Eu volutpat odio facilisis mauris sit amet. Porta nibh venenatis cras sed felis eget velit aliquet.
Id consectetur purus ut faucibus pulvinar. Augue interdum velit euismod in pellentesque massa placerat. Faucibus turpis in eu mi bibendum. Sit amet luctus venenatis lectus. Odio aenean sed adipiscing diam donec adipiscing tristique. Donec massa sapien
faucibus et molestie ac. Lacus luctus accumsan tortor posuere ac ut consequat semper. Molestie at elementum eu facilisis sed odio.</p>
<p>Sapien faucibus et molestie ac feugiat sed. Sem integer vitae justo eget magna. Dolor sed viverra ipsum nunc. Nec nam aliquam sem et. Vulputate sapien nec sagittis aliquam malesuada. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Ac feugiat
sed lectus vestibulum mattis ullamcorper velit sed. Velit laoreet id donec ultrices tincidunt arcu. Mollis nunc sed id semper risus in hendrerit. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Volutpat ac tincidunt vitae semper quis
lectus nulla at. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Urna molestie at elementum eu facilisis.</p>
<p>Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Tristique magna sit amet purus gravida. Sem et tortor consequat id porta. Tellus orci ac auctor augue mauris augue neque gravida. Tellus pellentesque eu tincidunt tortor aliquam nulla
facilisi. Congue quisque egestas diam in arcu cursus euismod quis. Diam donec adipiscing tristique risus nec feugiat. Scelerisque varius morbi enim nunc faucibus. Sit amet volutpat consequat mauris nunc congue nisi vitae. Dui sapien eget mi proin sed
libero enim sed. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Enim praesent elementum facilisis leo vel fringilla est ullamcorper eget.</p>
<p>Nunc sed blandit libero volutpat. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Vitae auctor eu augue ut lectus arcu bibendum. Auctor augue mauris augue neque gravida in. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque.
Imperdiet nulla malesuada pellentesque elit eget gravida. Rhoncus aenean vel elit scelerisque mauris. Hendrerit gravida rutrum quisque non tellus. Velit sed ullamcorper morbi tincidunt. At augue eget arcu dictum varius. Vivamus arcu felis bibendum ut
tristique et egestas quis ipsum.</p>
<p>Aliquam faucibus purus in massa. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Dictumst quisque sagittis purus sit amet volutpat consequat. Felis eget nunc lobortis mattis aliquam faucibus. Purus sit amet volutpat consequat mauris
nunc. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Commodo nulla facilisi nullam vehicula ipsum a arcu. Accumsan tortor posuere ac ut consequat semper viverra. Sapien et ligula ullamcorper malesuada. Pulvinar mattis nunc sed blandit
libero volutpat. Nec nam aliquam sem et tortor. Nisl purus in mollis nunc sed id semper. Nam at lectus urna duis convallis convallis tellus id interdum.</p>
<p>Euismod quis viverra nibh cras pulvinar mattis nunc. Odio tempor orci dapibus ultrices in. Gravida cum sociis natoque penatibus et magnis dis parturient. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Curabitur vitae nunc sed velit
dignissim sodales ut eu. Nunc id cursus metus aliquam eleifend mi in nulla. Nibh venenatis cras sed felis. Viverra mauris in aliquam sem fringilla ut. Integer malesuada nunc vel risus commodo viverra maecenas. Diam donec adipiscing tristique risus nec
feugiat in. Nec ullamcorper sit amet risus nullam eget felis eget. Est lorem ipsum dolor sit amet. Feugiat in fermentum posuere urna. Volutpat sed cras ornare arcu.</p>
<p>Odio tempor orci dapibus ultrices in iaculis nunc sed. A arcu cursus vitae congue mauris rhoncus aenean. Scelerisque in dictum non consectetur a erat nam at lectus. Aenean et tortor at risus. Nisi quis eleifend quam adipiscing vitae proin sagittis. Mi
bibendum neque egestas congue quisque egestas diam. Magna ac placerat vestibulum lectus mauris ultrices eros in. Commodo quis imperdiet massa tincidunt. Id leo in vitae turpis. Sapien faucibus et molestie ac feugiat. Diam quam nulla porttitor massa
id neque aliquam vestibulum. Eget egestas purus viverra accumsan.</p>
<p>Suspendisse interdum consectetur libero id faucibus. Quis auctor elit sed vulputate mi sit. Lobortis scelerisque fermentum dui faucibus in ornare. Sapien et ligula ullamcorper malesuada. Aliquam nulla facilisi cras fermentum odio. Convallis posuere morbi
leo urna molestie at elementum eu facilisis. In nulla posuere sollicitudin aliquam. Quisque non tellus orci ac auctor augue. Nam at lectus urna duis. Arcu odio ut sem nulla pharetra diam sit. Elit eget gravida cum sociis natoque penatibus et magnis
dis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Tortor consequat id porta nibh venenatis.</p>
<p>Sagittis purus sit amet volutpat consequat mauris nunc. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Pellentesque elit eget gravida cum sociis natoque penatibus. Sodales ut etiam sit amet nisl purus in mollis. Viverra justo
nec ultrices dui. Etiam erat velit scelerisque in dictum non consectetur. Cursus sit amet dictum sit amet justo. Cras fermentum odio eu feugiat pretium nibh. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Lorem sed risus ultricies
tristique nulla aliquet enim. Vel quam elementum pulvinar etiam non quam lacus suspendisse. Ante metus dictum at tempor commodo. Id cursus metus aliquam eleifend. Lacinia at quis risus sed vulputate odio ut enim blandit. Iaculis urna id volutpat lacus
laoreet non curabitur gravida arcu. Commodo ullamcorper a lacus vestibulum sed.</p>
<p>Malesuada nunc vel risus commodo viverra maecenas. Fames ac turpis egestas sed tempus. In massa tempor nec feugiat. In est ante in nibh mauris cursus mattis molestie. Elit ut aliquam purus sit amet luctus venenatis lectus. Elit at imperdiet dui accumsan
sit amet nulla facilisi. Netus et malesuada fames ac turpis egestas sed tempus urna. Quam nulla porttitor massa id neque aliquam vestibulum morbi. Ligula ullamcorper malesuada proin libero. Maecenas ultricies mi eget mauris pharetra et ultrices neque.
Diam maecenas sed enim ut.</p>
<p>Nulla facilisi nullam vehicula ipsum a arcu. Magna fermentum iaculis eu non diam phasellus vestibulum lorem. Morbi tristique senectus et netus et malesuada fames ac turpis. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Dictumst
quisque sagittis purus sit amet volutpat consequat mauris. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Sit amet nisl suscipit adipiscing. Euismod lacinia at quis risus sed. Massa tincidunt nunc pulvinar sapien et. Dui faucibus in ornare
quam viverra. Viverra vitae congue eu consequat. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque.</p>
<p>Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Laoreet sit amet cursus sit amet dictum. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Diam maecenas sed enim ut sem. Egestas sed sed risus pretium quam vulputate dignissim
suspendisse in. Auctor urna nunc id cursus metus. Amet aliquam id diam maecenas. Condimentum vitae sapien pellentesque habitant morbi tristique. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Felis eget nunc lobortis mattis aliquam faucibus
purus in. Sed odio morbi quis commodo odio aenean sed.</p>
I have encountered the issue described above in a report that I have created and requires printing from within an ASP.NET application.
I have created a simplified version so I could try and find the problem.
Please take a look. Preview the page in the browsers print preview, you will see that the code I have highlighted bold causes the table header to not repeat. Remove the page-break-before and the header should reappear.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#media print
{
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tbody {display: table-row-group; }
}
</style>
</head>
<body>
<div style='margin-left: auto; margin-right: auto; width: 602px; border: 0px solid #000000; padding: 0px 5px 5px 5px; font-size: 10pt; font-family: Tahoma'>
<table style="font-size: 12pt; font-family: verdana">
<thead>
<tr><th align="center">HEADER</th></tr>
</thead>
<tbody>
<tr><td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in tellus ante, eu pharetra neque. Pellentesque a blandit odio. Donec porta sodales arcu vitae commodo. Praesent eu dolor justo. Cras facilisis, tellus sit amet laoreet blandit, libero nibh pharetra lacus, nec sagittis odio tortor quis leo. Quisque rhoncus nisi at urna tempor feugiat. Sed fermentum augue ultricies nunc facilisis vel dignissim ante dapibus. Mauris auctor, lorem sit amet vestibulum ultrices, erat neque fringilla lacus, at laoreet sem risus pulvinar enim. Proin laoreet pellentesque neque, et elementum magna volutpat vitae. Curabitur et nulla velit, ut tincidunt ante. Proin ac nulla sit amet odio rutrum viverra a in nibh. In hac habitasse platea dictumst.
<br /><br />
Pellentesque eu lacus non nisi ornare viverra. Quisque arcu nunc, pretium in feugiat et, tristique venenatis odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc arcu velit, suscipit sit amet porta vel, volutpat id ante. Mauris et nulla dui. Cras elementum posuere euismod. Donec ante dui, molestie non tempus quis, fermentum quis tellus. Proin viverra tellus quis lectus pharetra ut iaculis neque pharetra.
<br /><br />
Sed sed gravida tellus. Etiam pulvinar nibh quis est tempus dapibus eu quis eros. Etiam vel urna nunc. Suspendisse potenti. Aliquam sit amet libero nec neque adipiscing feugiat quis non odio. Fusce malesuada magna et orci egestas eget lacinia erat adipiscing. Proin vitae euismod elit. Cras ut sem nisl. Ut ornare dolor at erat dignissim eu cursus tortor ullamcorper.
<br /><br />
Suspendisse vel odio a elit sagittis porta et vitae justo. Nam quis sodales neque. Donec magna sem, faucibus et semper sit amet, adipiscing sit amet mi. Vestibulum non neque ligula, vitae luctus nulla. Mauris quis libero pulvinar justo iaculis lacinia. Donec gravida eleifend tortor. Maecenas tristique iaculis nunc, eu sagittis dolor interdum et. In hac habitasse platea dictumst.
<br /><br />
Duis orci leo, dapibus vestibulum luctus nec, accumsan tempor dolor. Donec blandit venenatis erat, et volutpat quam hendrerit eu. Suspendisse potenti. Quisque risus nulla, malesuada sed semper ac, molestie nec est. In nec dignissim sem. Nulla enim nunc, eleifend eu fringilla sagittis, pellentesque non urna. Sed mi diam, ullamcorper et accumsan quis, placerat ut nisi. Nunc purus neque, semper non posuere ut, vestibulum vel odio.
<br /><br />
Maecenas aliquam sodales eros, sed faucibus mauris mattis eget. Nulla erat lectus, luctus id fermentum eu, posuere ac tellus. Praesent nisl erat, cursus eu tincidunt congue, viverra rhoncus enim. Pellentesque orci nisi, sagittis vel pretium posuere, pellentesque at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus felis odio, tincidunt in molestie id, aliquet id magna. Vestibulum sit amet orci eget felis tempus cursus. Nullam aliquet, lacus eget pharetra rhoncus, nisi orci pellentesque felis, id vestibulum mauris turpis aliquet risus. Sed rutrum est non est adipiscing ut dictum odio feugiat. Integer arcu nunc, porta pharetra facilisis ut, congue congue dolor. Quisque metus leo, cursus eget viverra iaculis, sodales eu leo. Vivamus ipsum lorem, fringilla sed sagittis vel, commodo quis lectus. Nunc ornare accumsan diam, ut aliquet purus laoreet sit amet. Pellentesque lacinia ligula quis ipsum dictum quis malesuada turpis semper.
<br /><br />
Duis laoreet auctor nibh a fermentum. Phasellus sapien risus, sodales et mollis in, dictum at nisi. Vestibulum eu nibh nec nulla pretium ornare. Aenean at ipsum orci, a laoreet nisl. In fermentum feugiat eros, sed gravida ipsum porta nec. Suspendisse luctus porta erat sit amet gravida. Nunc in lacus in odio accumsan euismod et a elit. Curabitur bibendum mauris bibendum dolor gravida dapibus. Quisque urna dolor, pulvinar tincidunt posuere dignissim, fringilla vel tortor. Morbi pellentesque sollicitudin eros ac tempus. Aliquam erat volutpat.
<br /><br />
Aliquam erat volutpat. Etiam congue, mi aliquet eleifend consequat, metus eros posuere augue, sed accumsan nunc justo sit amet est. Duis sed felis vel elit scelerisque tristique sit amet quis diam. Fusce ut ultricies odio. Mauris scelerisque placerat tempor. Sed vestibulum mollis velit nec imperdiet. Sed elementum sodales metus, et fermentum leo aliquet auctor. Ut at nisl vitae purus rhoncus aliquam. Sed aliquet libero ac est egestas quis condimentum nisi rutrum. Donec condimentum vehicula odio, eu dignissim neque pulvinar a. Integer lobortis tempus blandit. Nullam faucibus lorem sed mauris consectetur id viverra turpis suscipit.
<br /><br />
Sed id diam neque. Donec elementum, enim sit amet ultrices semper, quam justo fringilla dolor, quis condimentum velit orci vel felis. Duis a elit vel nibh convallis dictum. Nam vel arcu nibh, id pretium orci. Maecenas vel dui nisi, id consequat nibh. Nulla blandit eleifend nunc varius semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut condimentum nibh. Pellentesque sit amet faucibus justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Sed eget leo mauris. Vivamus luctus, felis at aliquet imperdiet, nibh erat auctor lacus, ac dignissim orci neque faucibus sapien. Suspendisse tempus venenatis purus ac facilisis. Aenean ac ultrices arcu.
<br /><br />
Suspendisse posuere, orci eget luctus tristique, odio lectus varius orci, eu mattis erat ante ac risus. Donec dictum pretium leo, eu porta enim dapibus eget. Donec in libero tortor, id tempus libero. Nunc magna tellus, placerat ut adipiscing vitae, volutpat ac arcu. Quisque sit amet leo massa. Nunc cursus, odio nec molestie sollicitudin, leo tellus dictum magna, eu sollicitudin libero ligula ac urna. Morbi ac sapien libero, ut eleifend massa. Etiam a risus vitae ipsum tempus pharetra sit amet vitae erat. Morbi sit amet lorem vulputate magna ultrices tincidunt sed vel urna. Aenean pulvinar, risus quis pharetra tincidunt, purus est accumsan odio, et accumsan turpis massa vitae leo. Vivamus at eros dolor. Donec ornare, nulla ut venenatis adipiscing, purus urna vestibulum nisi, placerat tincidunt nibh tortor vitae arcu. Vestibulum id turpis erat, ut adipiscing lorem. Duis venenatis, magna id lobortis accumsan, velit nisl convallis augue, sit amet interdum urna lorem sit amet sapien. Curabitur facilisis convallis lorem sit amet mollis. In hac habitasse platea dictumst.
<br /><br />
Quisque eget nunc leo. Vivamus rhoncus ultrices dolor in porta. Phasellus condimentum tempor justo nec facilisis. Sed consequat dictum dui, eget lacinia arcu rhoncus eget. Curabitur vehicula laoreet nunc quis tincidunt. Maecenas eget massa sed ligula interdum euismod quis vitae urna. Praesent luctus, dolor a faucibus tristique, purus lorem aliquam lectus, sed hendrerit ante nisl vel ligula.
<br /><br />
**<div style="page-break-before: always">**
Curabitur pulvinar sollicitudin est id elementum. Vestibulum quis lacus nisl. In pretium quam vel diam iaculis sit amet tristique justo viverra. Vestibulum ut magna nibh, quis pulvinar enim. Nulla facilisi. Sed posuere pulvinar urna, a porta odio congue in. Curabitur faucibus turpis quis nibh semper tincidunt. Ut egestas, justo ut vehicula elementum, magna eros sagittis nulla, placerat euismod nibh quam eget quam. Nullam placerat turpis vel lorem pharetra pharetra. Nunc eros nisl, aliquet rutrum sollicitudin et, ultrices volutpat augue. Maecenas dapibus adipiscing mattis. Nulla vitae velit tortor. Proin suscipit, augue in egestas aliquam, massa nisl pharetra mauris, sed vulputate lacus mi sit amet nibh. Donec ut justo tortor, non semper ligula. Nunc facilisis blandit lorem at pulvinar.
</div>
<br /><br />
Integer imperdiet faucibus mattis. Integer condimentum scelerisque erat, sed adipiscing dui condimentum vel. Etiam aliquet tempus neque, in fermentum massa tristique eu. Sed tempus neque vel eros tincidunt eget lobortis massa accumsan. Ut enim elit, rutrum vel adipiscing egestas, gravida nec urna. Proin fringilla aliquet hendrerit. Aenean a porttitor nunc. Ut vestibulum malesuada massa sit amet dictum. Duis ut sem ac augue fermentum tincidunt. Aliquam convallis pellentesque elementum. Suspendisse accumsan, lectus vitae tempus elementum, risus urna lacinia nunc, non dapibus sem nunc sit amet neque. Integer eu metus erat. Donec at ante neque. Nullam convallis odio sit amet enim sollicitudin vel vestibulum turpis aliquam.
<br /><br />
Aenean mattis velit vel ipsum eleifend sit amet auctor metus fringilla. Quisque a lacus orci. Ut luctus vulputate imperdiet. Mauris luctus massa at erat posuere sit amet convallis magna malesuada. Mauris tempus auctor suscipit. Phasellus eu est vel metus pharetra commodo ac posuere orci. Duis massa purus, lobortis et fringilla et, venenatis eget odio. Fusce vel sapien nisl. Suspendisse nisi nisi, tempor ut volutpat vitae, pharetra id ligula. Donec ipsum enim, dignissim et pharetra nec, vehicula et mauris. Ut sit amet nisl odio. Sed eleifend auctor metus, vel laoreet diam varius vel. Vestibulum sit amet augue nec massa faucibus rhoncus. Nulla sodales justo nec nisl commodo facilisis. Aenean euismod tortor eget lorem ultricies tincidunt.
<br /><br />
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque mi dolor, hendrerit a laoreet vehicula, elementum ut elit. Nullam sodales justo sed turpis volutpat blandit. Mauris augue est, tincidunt at vestibulum vitae, vestibulum non velit. Ut ac bibendum orci. Vestibulum lacus velit, rhoncus sed pellentesque ac, aliquam vitae sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam condimentum nulla lacinia purus luctus et molestie eros cursus. Ut quis erat at magna aliquet laoreet. Suspendisse iaculis hendrerit vulputate.
<br /><br />
Etiam lobortis tortor lectus. Curabitur a ligula lorem. Donec vel odio a urna fermentum tincidunt in in libero. In hac habitasse platea dictumst. Morbi vel dui vitae ligula interdum ultricies in nec nisi. Sed sit amet odio in massa sodales mattis. Nunc non dolor ac turpis laoreet ultrices quis pellentesque felis. In egestas justo sed libero molestie in posuere odio condimentum. Morbi ultrices nibh vitae nisi posuere molestie. Fusce tempor porttitor leo, quis congue turpis congue non. Aliquam lorem libero, lacinia eget egestas nec, consectetur vitae eros. Cras interdum elementum odio, a venenatis odio gravida in. In vestibulum volutpat libero id vehicula. Nulla et vehicula eros. Mauris lacinia leo vitae lectus accumsan dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br /><br />
Vestibulum sollicitudin sollicitudin consectetur. Vivamus fringilla gravida tempus. Phasellus vel fermentum erat. Maecenas auctor euismod lectus et vestibulum. Vivamus fringilla urna et justo rutrum imperdiet. Nunc a diam interdum nulla porta tempor. Nulla tellus risus, dignissim fringilla laoreet ac, lacinia et risus. Aliquam ut est orci, non molestie turpis. Etiam fringilla leo eget felis luctus et blandit nulla porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<br /><br />
In sapien neque, varius at elementum vel, rutrum ut mauris. Phasellus pellentesque facilisis lacinia. Vivamus interdum nibh quis elit vehicula eget faucibus mauris commodo. Donec odio leo, faucibus in pellentesque a, pulvinar vel velit. Phasellus et sagittis felis. Phasellus ultrices elit sed mi tincidunt vel viverra nisl vestibulum. In eu augue nec odio ultrices tempor. Aliquam erat volutpat. Mauris ut urna ligula. Pellentesque tempus, tellus blandit placerat faucibus, nulla lorem dignissim neque, ut iaculis tortor orci nec ligula. Nunc sodales convallis mattis. Etiam ac neque ac nisi volutpat imperdiet. Sed semper eleifend tellus, eget porta eros molestie ut. Quisque at ante sem. Donec non dolor tincidunt ipsum convallis suscipit. Aliquam ipsum nibh, dapibus at imperdiet tempus, fermentum ut velit.
<br /><br />
Vestibulum nibh orci, tincidunt nec sodales sit amet, lacinia vel nisi. Praesent tempor porttitor commodo. In hac habitasse platea dictumst. Donec suscipit, nunc in condimentum semper, tellus orci egestas nisl, pellentesque malesuada lacus lacus ac turpis. Donec at sapien ante. Praesent cursus dapibus turpis et porta. Etiam imperdiet aliquam augue, in varius sem tempor vitae. Phasellus at nunc id nisl vulputate porta vitae vitae quam.
<br /><br />
Morbi sodales nibh non lectus tincidunt elementum. Donec feugiat, nisi sit amet accumsan molestie, tellus lectus condimentum est, ut vulputate tellus ipsum in nisi. Duis mattis lorem et est vestibulum eu sollicitudin erat sodales. Integer porta varius imperdiet. Ut suscipit, lacus vel gravida iaculis, ipsum erat ultricies turpis, et egestas lacus sem id libero. Proin at mauris vel mi lobortis convallis vitae et tortor. In elementum mi vel ipsum tempus bibendum. Nam adipiscing, sem non semper rutrum, felis est lacinia felis, faucibus mollis diam ante et nisl. Nam erat eros, faucibus non porta vitae, rhoncus sit amet velit. Vestibulum sed elementum mauris. Praesent neque dolor, bibendum vel luctus lacinia, viverra nec odio. Morbi pharetra luctus ante non rutrum. Pellentesque rutrum, orci eu fringilla condimentum, felis massa tempor purus, quis rhoncus massa libero ac tortor. Phasellus a sapien est. Integer vulputate mauris eu erat pellentesque dictum. Phasellus eu lorem sed eros commodo convallis a at odio. </td></tr>
</tbody>
</table>
</div>
</body>
</html>
Please use this instead it solves your problem, however, it is strongly advised not to use page-breaking properties and table together by w3schools
code is here jsfiddle
<table style="font-size: 12pt; font-family: verdana; page-break-before: always">
<thead>
<tr><th align="center">HEADER</th></tr>
</thead>
<tbody>
<tr><td>
Basically, I created a second table where your desired page break should occur. And place the style of page-break-before: always on the table.
I'd like to add a simple separator line in an aspx web form.
Does anyone know how? It sounds easy enough, but still I can't manage to find
how to do it..
10x!
A horizontal rule <hr /> ?
Try the following:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisi arcu, rutrum vel dignissim ac, elementum eu ligula. Mauris faucibus mi sit amet lectus consequat ut lacinia quam fermentum. Donec urna massa, porttitor ac blandit ut, mattis in risus. Ut eget nunc imperdiet nisi ultricies gravida. Integer suscipit ultrices elit, id elementum diam pharetra semper. Nullam tincidunt, tellus id tincidunt sodales, libero sapien porttitor ligula, rhoncus rhoncus eros mauris vel arcu. Proin ullamcorper tellus et purus adipiscing id luctus purus lacinia. Quisque lobortis, enim nec mattis adipiscing, arcu ante tempus eros, vitae sodales nulla urna eget sapien. Cras dui risus, eleifend molestie vulputate eu, varius ut libero. Vivamus consectetur dapibus adipiscing. Cras porta pulvinar felis. Praesent quis velit massa, non interdum neque. Quisque metus quam, tincidunt eu iaculis quis, auctor sed justo.
<hr/>
Nam vitae dui ipsum, id varius urna. Vivamus consequat auctor neque, ac vulputate tellus luctus sit amet. Maecenas vitae libero libero. Nulla et lacus in ante placerat ullamcorper. Pellentesque a erat sapien, convallis rutrum est. In luctus magna a lorem lobortis vel malesuada turpis dictum. Nam condimentum nunc in nunc tincidunt tincidunt. Etiam iaculis lectus at urna faucibus quis facilisis enim imperdiet. Phasellus sit amet viverra nisi. Cras tincidunt enim vel velit cursus elementum. Fusce sodales odio ac erat tincidunt ullamcorper tempor libero interdum. Curabitur a eros ligula. Phasellus sollicitudin dolor cursus lorem porttitor mollis. Nulla non sapien odio, et consectetur nisl. Curabitur convallis bibendum lacus eleifend imperdiet.
</div>
If you want to control its thickness and color, use a style:
<div style="border-top:1px solid red;"/>
I'm looking for a footer like facebook has but only use CSS to style it no js.
As you can see here http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1256.png it always stays at the bottom even if I scroll down. http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1258.png
For all browsers, save for IE6, do this:
div#footer {
bottom: 0;
width: 100%;
height: 25px;
position: fixed;
}
I know you mentioned not wanting to use JavaScript, but as for IE6, it's been my experience that you may have to resort to some sort of JavaScript expression in the CSS to get it to work as smoothly as this CSS does in other browsers.
This might do it:
http://ryanfait.com/sticky-footer/
I've used this in the past:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fixed CSS layer sample</title>
<style type="text/css">
body
{
margin:0;
padding:0 10px 0 10px;
border:0;
height:100%;
overflow-y:auto;
}
#fixed
{
display:block;
bottom:0px;
left:0px;
right:0px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:center;
font-weight:bold;
color:#000;
background: #ccc;
width: 100%;
height: 100px;
}
* html #fixed
{
position:absolute;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div id="page">
<p><h3>Some latin text here to make the page scroll</h3></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pharetra pharetra tortor. Nunc in pede. Cras dapibus. Phasellus pede tortor, facilisis id, rutrum non, eleifend non, sem. Phasellus ut metus eu pede mollis sagittis. Cras ut justo ut metus rutrum auctor. Sed gravida consectetuer quam. Ut ligula. Suspendisse potenti. Ut et ante. Aenean mauris.</p>
<p>Praesent lorem. Praesent suscipit convallis orci. Morbi nec felis vitae est vehicula ornare. Quisque nisi neque, pretium ac, eleifend nonummy, cursus sit amet, purus. Nullam venenatis suscipit arcu. Aenean mattis enim vitae nisl. Maecenas diam pede, vehicula in, vehicula in, auctor ac, urna. Phasellus vel nibh scelerisque ante varius feugiat. Phasellus vehicula malesuada lorem. Donec elementum, elit vel cursus rhoncus, purus est nonummy leo, fermentum lacinia ante libero quis libero. Vivamus tincidunt, nulla et dapibus interdum, risus magna pharetra purus, eu adipiscing mi nisl eu massa. Donec elit arcu, scelerisque eu, suscipit quis, tincidunt ut, enim. Suspendisse eget justo vitae lectus euismod facilisis. Donec at ipsum nec mi sollicitudin viverra. Fusce accumsan, ante non dictum viverra, libero pede condimentum dolor, non congue nisl enim sit amet nulla. Aenean mollis, metus sed molestie bibendum, nulla erat tincidunt velit, non feugiat lorem mauris id mi. Mauris eleifend. Vivamus viverra. Fusce dapibus libero feugiat lorem.</p>
<p>Donec a nisl nec neque dictum varius. Aliquam consequat ipsum in dui placerat feugiat. Nam fringilla, libero ut consectetuer aliquet, lorem nisi pharetra est, eu sagittis lorem purus ac dolor. Donec aliquet mi nec augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium, est sed feugiat bibendum, odio ligula convallis pede, id aliquet erat turpis sit amet ipsum. Phasellus pulvinar laoreet arcu. Curabitur nunc. Ut id purus vitae lacus convallis consectetuer. Duis in quam. Praesent pharetra. In quis est a massa pretium auctor. Nam metus mi, pulvinar ac, blandit nec, suscipit semper, quam. Integer eget felis id enim sodales dictum. Phasellus quis neque. Duis cursus imperdiet lorem. Etiam eget risus et erat dapibus feugiat. Aenean gravida justo vitae lectus. Nullam aliquet. Integer et augue porttitor urna varius porta.</p>
<p>Suspendisse ultricies mauris eget velit dictum tincidunt. Maecenas id pede quis massa ornare congue. Fusce placerat odio non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dignissim nunc ac ipsum. Integer ac libero et risus luctus ultrices. Phasellus urna. Nunc a lorem eu diam mollis rhoncus. Curabitur velit mi, mollis sit amet, vulputate ut, varius lobortis, turpis. Nulla scelerisque euismod lacus. Phasellus vehicula justo sed diam. Sed non nisi sit amet sem posuere fermentum. Donec faucibus pede. Donec pharetra tristique lacus.</p>
<p>Maecenas luctus, nisl molestie gravida sagittis, quam augue elementum mi, vitae scelerisque lacus eros id mi. Pellentesque purus erat, hendrerit eu, suscipit eu, elementum quis, quam. Sed faucibus lorem lobortis ipsum. Nulla facilisi. In et leo et erat ullamcorper iaculis. Duis aliquet ipsum quis ligula. Sed condimentum, ipsum semper tincidunt tempus, nisi nulla congue ante, ut placerat ligula est eget risus. Nam nonummy molestie tortor. Nunc dapibus, metus id adipiscing mattis, felis enim pretium risus, ac elementum nibh massa at nulla. Duis eu dui nec lacus aliquet iaculis. Fusce et odio eu pede ultricies fermentum. Morbi pulvinar vulputate odio. Vestibulum dui ante, feugiat a, sodales at, tristique eu, dolor. Phasellus est. In in neque at lectus tristique pulvinar. Pellentesque sed nulla. Aliquam fermentum, diam eu auctor eleifend, velit elit scelerisque nulla, at dignissim odio justo id metus. Duis mattis rutrum mauris. Nullam quis nulla.</p>
<p>In justo tellus, elementum ac, aliquet egestas, luctus ac, pede. Nulla facilisi. Sed et dui. Suspendisse pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras erat lectus, fermentum at, iaculis quis, blandit non, eros. Donec libero turpis, laoreet vitae, volutpat in, molestie ac, nulla. Donec tempus. Aenean eleifend cursus velit. Duis dolor ipsum, commodo a, commodo ac, faucibus vitae, quam. Integer dignissim. Curabitur non elit. Ut aliquet eros sit amet nisi.</p>
<p>Sed consequat est vitae tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec convallis, ligula sed rhoncus viverra, augue orci commodo massa, quis laoreet nulla lacus quis velit. Suspendisse a eros in massa sodales fermentum. Aliquam a augue. Sed nonummy eros eget magna dictum venenatis. Vestibulum molestie pede sit amet neque. Duis et ante ac eros mattis ultrices. Praesent placerat felis non nisl. Curabitur eleifend, purus non rhoncus lobortis, erat felis vestibulum est, at sagittis est orci ut orci. Aliquam pretium. Pellentesque eget neque. Nam sit amet tellus.</p>
<p>Integer ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nulla metus, auctor sit amet, semper ut, ullamcorper sit amet, eros. Maecenas aliquam metus ut metus. Suspendisse sed neque vel odio dapibus iaculis. Sed semper. Nulla et pede vel sapien laoreet interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus neque dolor, ultrices quis, molestie commodo, tempus vel, massa. Cras nec diam eleifend libero adipiscing aliquet. Duis malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat metus ac elit imperdiet tincidunt. Mauris pellentesque nunc eget lectus.</p>
<p>Proin id nunc sit amet mi lobortis aliquet. Ut eget felis sit amet nunc viverra lacinia. Maecenas ut nulla sed metus bibendum mattis. In hac habitasse platea dictumst. Aliquam consectetuer nunc vel neque. Nullam quam nisi, semper eget, faucibus nec, vehicula quis, mi. Nunc nisi. Donec massa metus, pharetra vitae, vehicula non, eleifend at, libero. Ut ac est a nunc rutrum vestibulum. Nulla gravida. Sed suscipit luctus augue. Aliquam posuere felis. Nunc interdum, nisi a blandit scelerisque, mi nibh blandit justo, et malesuada nibh ligula id ipsum. Donec a ipsum sed nunc placerat interdum. Curabitur blandit. Suspendisse varius faucibus dolor. Cras a urna. Mauris leo. Nunc pretium, pede ut posuere cursus, sapien tellus blandit massa, id vestibulum metus est vitae tellus. Maecenas urna.</p>
<p>Pellentesque tortor. Pellentesque faucibus dui vitae mauris. Pellentesque bibendum iaculis tortor. In sem purus, eleifend in, laoreet ut, tincidunt nec, magna. Mauris gravida, diam eu tincidunt fringilla, est nisi pharetra ante, non luctus justo odio a ipsum. Maecenas eu augue. Ut iaculis. Nunc arcu nunc, elementum sed, aliquam non, laoreet sed, nisl. Pellentesque felis. Suspendisse auctor tortor ut turpis. Vestibulum tincidunt laoreet neque. Phasellus odio enim, mollis vel, varius sed, imperdiet ut, tortor. Phasellus eleifend dolor ut metus. Proin est. Phasellus placerat pede rutrum libero. Suspendisse varius erat a urna convallis porta. Integer hendrerit odio id leo. Sed porta sapien suscipit sem.</p>
<p>Quisque a lorem. Duis quis tortor. Suspendisse mattis porttitor augue. Aliquam facilisis porttitor quam. In vel metus ut quam commodo viverra. Pellentesque et mauris sit amet eros adipiscing commodo. Maecenas vitae pede vitae diam viverra vestibulum. Integer suscipit, quam sit amet hendrerit porta, velit tellus rhoncus pede, eget sollicitudin arcu felis quis leo. Sed auctor blandit ligula. Fusce accumsan viverra nibh. Aliquam erat volutpat. Quisque velit velit, sagittis et, congue at, auctor eu, quam. Sed dui ipsum, rhoncus eget, commodo at, vulputate a, metus. Donec eu mi. Sed laoreet faucibus ipsum. Donec cursus egestas turpis. Nulla facilisi. Nam et tellus.</p>
<p>Praesent sagittis ligula eget lacus dictum blandit. Nam libero pede, faucibus non, vestibulum tempus, tincidunt quis, est. Vestibulum accumsan risus. Nulla facilisi. Praesent nisi turpis, pulvinar vitae, blandit vitae, hendrerit vel, ante. Morbi viverra purus dapibus quam. Donec ligula. Cras pretium metus. Nunc ac erat. Sed elit quam, cursus sit amet, egestas eget, cursus sit amet, orci. Praesent non purus non orci sodales interdum. Fusce lobortis risus eu est.</p>
<p>Quisque arcu nisl, fringilla vel, vehicula in, bibendum nec, arcu. Nullam sit amet mi nec velit cursus rhoncus. In sed ante. Aenean nec augue. Curabitur et sem laoreet dolor blandit aliquam. Mauris sollicitudin orci nec leo. Proin magna. Suspendisse eleifend, diam vitae mattis suscipit, felis risus varius massa, ut ornare eros pede nec ligula. Proin commodo, justo et egestas ultrices, tellus elit aliquam ante, a rhoncus felis risus elementum arcu. Quisque placerat mattis arcu. Etiam auctor auctor nisl. Ut sed purus. Donec semper iaculis arcu. Maecenas nulla. Sed congue euismod nulla. Vestibulum ligula justo, venenatis at, rhoncus ac, iaculis id, nunc. Morbi sit amet augue eu ipsum fermentum facilisis.</p>
<p>Nam magna. Fusce sed ante in mauris consectetuer mattis. Mauris imperdiet nibh tincidunt elit. Praesent eget lectus quis sem egestas molestie. Suspendisse potenti. Nunc mauris quam, pharetra id, gravida vitae, sodales id, lacus. Fusce lectus. Integer mollis justo. Duis vel mi et massa porttitor dictum. Donec scelerisque leo quis nulla. Sed ante ante, feugiat eget, vulputate a, dignissim quis, elit. Nam in turpis. Morbi lacus libero, varius at, dignissim id, auctor eget, urna. Cras in mauris. Vivamus felis purus, tempus at, volutpat eget, fermentum sagittis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
<p>Mauris mattis tincidunt erat. Maecenas aliquam mauris vel nulla. Morbi volutpat. Sed lorem mauris, interdum id, accumsan sit amet, consequat interdum, velit. Pellentesque ac est non sem posuere accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut vitae augue non lorem rhoncus malesuada. Phasellus viverra, leo non commodo ullamcorper, leo nibh accumsan mi, a tempus lectus lectus ac erat. Morbi ultrices mauris sit amet nunc. Donec porta nisl. Aenean tempor.</p>
</div>
<div id="fixed">[fixed footer]</div>
</body>
</html>
Might need some modification, especially to work in IE6. If I recall correctly, I had to add in some page breaks under the page content to stop the footer overlapping the content, but that aside, I think it worked fine.