I am creating a website in which the minimum height of the page is 200vh. I have a full page image, followed by text content below that. I want to prevent the text from overflowing out of the container. Here is an example:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
width: 100%;
min-height: 200vh;
background: red;
}
.full-page-image {
background-image: url("https://i.ytimg.com/vi/xC5n8f0fTeE/maxresdefault.jpg");
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
}
.content {
position: relative;
top: 100vh;
left: 10vw;
width: 80vw;
}
.content p {
font-size: 1.4em;
}
<div class="container">
<div class="full-page-image">
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum leo at hendrerit pulvinar. Integer non lacus dapibus, dictum ipsum sed, gravida erat. Quisque fermentum fermentum arcu, ac sollicitudin est. Mauris nec pulvinar mi, eu eleifend nisi. Cras lorem ligula, condimentum eget dictum quis, dapibus et est. Quisque tincidunt libero sit amet odio tincidunt, quis bibendum neque malesuada. Proin elementum nulla diam, ac porta est sodales at. Cras ac tortor in odio scelerisque scelerisque. Vestibulum eu ligula semper, lacinia purus ac, auctor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum aliquam nisi ligula, scelerisque imperdiet ante consequat ut. Proin est dolor, egestas a sapien vitae, ultricies euismod ex. Nam eget euismod ante. Praesent finibus sed nisi tincidunt pretium. Vestibulum porta laoreet sapien, et congue odio posuere eu. Proin nec lectus vel libero vestibulum tincidunt. In dapibus a nisl eu imperdiet. Donec faucibus odio a metus sagittis, et vulputate dui dapibus. Etiam non ex libero. Duis ultricies dignissim nulla, in mollis sem condimentum vitae. Etiam tincidunt sed dolor vitae venenatis. Maecenas volutpat felis eu vehicula pharetra. Donec a turpis lacus. Aenean tortor justo, iaculis ut erat eu, rhoncus sagittis elit. Nullam non sapien purus. In at consectetur augue, sit amet mollis justo.
Suspendisse feugiat quam vitae massa tempor luctus. Duis aliquam commodo dolor et commodo. Aenean sit amet nisl vitae quam tincidunt molestie id ac enim. Fusce eu ante imperdiet, viverra lacus at, efficitur risus. Vestibulum placerat, libero quis luctus faucibus, diam nisl tempor justo, eu tempus mauris ligula in libero. Pellentesque ut odio quis orci interdum gravida vitae ut neque. In hac habitasse platea dictumst. Ut finibus mi vitae enim euismod auctor. Integer libero dui, laoreet vel euismod vitae, eleifend mattis urna. Praesent convallis sodales elit, vel elementum purus dapibus nec. Curabitur euismod ullamcorper dolor, a egestas nibh porttitor rhoncus. Nam elementum bibendum elementum.
Fusce non nibh quis odio tempor lobortis ut et lorem. Quisque volutpat dapibus mauris, vitae varius ipsum sollicitudin malesuada. Etiam ultricies sapien tortor, et vehicula ipsum volutpat sollicitudin. Nulla id nisl nunc. Sed sit amet iaculis lacus. Nulla egestas ex purus, eget elementum nibh molestie et. Vivamus sodales rhoncus varius. Donec malesuada, quam et pharetra aliquet, odio erat gravida nunc, nec vehicula tellus diam in purus. Curabitur feugiat tempor nulla, euismod ornare lorem consequat at. Nam rutrum arcu porta nulla convallis viverra. Mauris pharetra velit arcu, ac placerat quam ornare ut. Morbi vitae diam quis turpis fringilla ornare at in urna. Nulla elit lectus, molestie sit amet risus nec, pretium vehicula diam. Morbi velit massa, accumsan eget iaculis eget, pharetra at ex. Duis purus eros, iaculis nec enim at, dignissim pellentesque purus. Nulla convallis, erat quis elementum posuere, metus libero malesuada erat, eu pharetra mauris libero id lacus.
Curabitur placerat accumsan hendrerit. Proin vel mauris eget justo fringilla volutpat eget a libero. Nullam iaculis varius fringilla. Morbi in urna mi. Pellentesque sit amet lacinia odio. Nunc vel dolor aliquet, vulputate magna non, consequat purus. Mauris non malesuada est, nec congue ante. Sed sit amet vestibulum nunc, id hendrerit urna. Ut porta eget risus a tincidunt. Aliquam ut dui elit. Nulla quis varius sapien, vulputate auctor mi. Phasellus rhoncus vestibulum purus, vestibulum porttitor libero mattis in. Aenean elit velit, ultrices in lacinia et, lobortis id tortor. Quisque dapibus cursus lorem, et consequat tellus pretium eu. Maecenas vitae magna bibendum mi placerat pellentesque.
</p>
</div>
</div>
How can I prevent the text from going outside of the red background?
You can prevent text overflowing a container by either 1. expanding the container to fit the text, or 2. hiding the overflowing text beyond the container.
1:
a. In your case, usage of top: 100vh will not change the height of the element, but will push the entire element downwards 100vh. Therefore it will overflow the parent/container element (the red background) by 100vh. The text inside this element will reach to the bottom, also overflowing by 100vh. Use margin-top: 100vh instead, to let the element start 100vh from the top, but end within it's parent element.
2:
a. Ensure the container is the desired height. Use dev tools to view/highlight the height of an element.
b. Set overflow: scroll; or overflow: hidden; see css overflow This will hide the text beyond the container height, with either scrollbars or not. Note: overflow: auto will (should) not show scrollbars if there is no overflow.
Pretty sure this what you are looking for:
.container {
position: absolute;
width: 100%;
min-height: 200vh;
overflow-y: auto;
background: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Related
I'm building a react app with flexbox and I'm struggling getting all the pieces as I want them.
I want a fixed header at the top with a body that has its content centered and that can be scrolled (the scrollbar has to start in the body, not the header). This body can't go to the edges of the page so I'm using max-width to prevent this. The problem is that when I use the max-width, the scrollbar gets placed next to the body and it looks awful. I want it to stay at the far right of the page. Finally I want some space between the end of the body and the page (a bit of padding, if you will) so the content doesn't look like it's getting cut with the end of the site.
I've done this mockup in Photoshop
I mostly got the code working, minus the max-width and bottom padding. Here's what I got:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
}
main {
flex: 1;
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
...
</main>
</div>
I understand that this question has been asked in multiple ways a lot of times, but I've been looking for a while and I can't find the right one that fixes every thing I need.
Thank you for the help.
What you can do is add another element within the <main> tag. I use a <div> tag in my example, but it could be whatever you want. Keep the
overflow: auto;
on the <main> tag, so when the inner div overflows, you can scroll the <main> tag to move the <div>
Here's an example where I added some background color to show separation and some Lorem Ipsum text:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
text-align: center;
}
#stuff {
border-radius: 5px;
background: pink;
padding: 5px;
margin: 20px;
flex: 1;
}
main {
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
<div id="stuff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec magna porta, commodo magna ut, porta erat. Phasellus tristique leo vitae ante efficitur, sed fermentum mi auctor. In condimentum mi a urna cursus vestibulum. Nunc posuere metus turpis, faucibus viverra purus aliquam nec. Curabitur ultrices, sem nec aliquet congue, ligula justo sagittis arcu, quis blandit urna sem nec sem. Cras accumsan, turpis ac placerat porta, libero ex semper tellus, non mattis dui ligula id odio. Cras lobortis ex in ex consequat, eu viverra nibh luctus. Nulla facilisi. Nulla odio arcu, suscipit eu dui eget, cursus sodales ipsum. Nulla vestibulum nisl eget ante pellentesque, vel porttitor magna dapibus. Suspendisse at ligula nunc. Phasellus scelerisque urna sit amet scelerisque pharetra. Quisque risus metus, tincidunt vitae ultricies in, convallis tempus justo. Sed finibus laoreet dolor sit amet tincidunt. Sed efficitur volutpat aliquet.
Suspendisse condimentum euismod quam id tempor. Vestibulum rhoncus metus eu tortor rhoncus eleifend. Nam sagittis ex ex, eget varius ante semper a. Aenean vulputate eget ligula vel sodales. Vivamus vel nisi dignissim, eleifend sem non, bibendum dolor. Ut pulvinar malesuada nisi sit amet suscipit. Sed ultrices maximus tellus, nec congue felis.
Duis urna orci, consequat et lacinia lobortis, varius sed sem. Ut auctor congue augue quis interdum. Morbi erat justo, venenatis ac imperdiet sit amet, cursus eget tellus. Quisque accumsan nibh a dui vulputate tincidunt. Aenean accumsan diam lorem, ac rutrum magna ullamcorper et. Proin volutpat dolor tristique scelerisque tempus. Donec eu neque non purus pulvinar bibendum sed vitae justo. Suspendisse luctus dolor neque, eu convallis tortor condimentum ac. Aliquam sollicitudin ex ut sollicitudin sagittis. Aliquam imperdiet, diam vel hendrerit iaculis, neque ex accumsan neque, in hendrerit risus massa convallis ante. Cras urna velit, cursus sed dignissim vitae, porttitor faucibus est. Vestibulum ut dolor aliquam, malesuada velit ut, vestibulum nibh. Maecenas at convallis ex, a aliquam dui. Mauris at eros sit amet leo gravida pulvinar.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc faucibus laoreet ipsum, facilisis facilisis quam ultrices et. Vivamus interdum ut tortor sit amet sollicitudin. Cras rhoncus blandit lectus sed maximus. Integer ac dui nec metus dignissim lobortis vel vel erat. Cras in dignissim arcu. Nunc vulputate mi turpis, at dignissim turpis ullamcorper vitae. Cras neque justo, sagittis ut tempus vitae, pellentesque a mi.
Duis vehicula eros erat, vel tincidunt ante aliquet eget. Ut malesuada, est a sollicitudin tincidunt, magna ante varius est, vitae pulvinar arcu neque sit amet magna. Sed sit amet erat fermentum, bibendum ex sed, dictum lorem. Ut aliquam nibh vitae tellus convallis, sed condimentum augue suscipit. Nunc ac tellus sem. Maecenas vitae finibus lorem. Ut et fringilla lacus. Morbi neque lacus, rhoncus non odio et, sodales ultrices erat. Pellentesque molestie et felis sit amet pharetra. Curabitur id lacinia dolor. Curabitur non dignissim lorem, eleifend posuere lorem. Aliquam orci felis, vulputate vel felis molestie, vestibulum tempor tellus. Quisque mollis mauris blandit posuere tincidunt. Suspendisse condimentum est at enim interdum condimentum.
Aliquam a risus cursus, pretium dui nec, consectetur elit. Sed sollicitudin consectetur magna id accumsan. Quisque interdum tristique diam, at porta orci condimentum ut. Curabitur in metus purus. Donec diam orci, volutpat eu rhoncus in, accumsan sed neque. Nam egestas vestibulum vestibulum. Mauris fringilla, enim in finibus hendrerit, metus urna finibus lacus, in dictum eros eros vel orci. Aliquam blandit elit sem, vel fringilla libero commodo eu. Cras euismod a mauris non malesuada. Aliquam luctus malesuada nisl sed efficitur. Mauris suscipit convallis venenatis. Ut varius velit vitae scelerisque fermentum. Donec luctus convallis hendrerit. Sed vestibulum, diam at euismod lacinia, dolor eros commodo lacus, vitae pellentesque dui metus vel leo.
In hac habitasse platea dictumst. Nam massa lectus, fermentum non dolor eu, auctor luctus ex. Duis posuere sit amet lorem ut commodo. Pellentesque ultrices in tortor vel dignissim. Quisque lorem nibh, ullamcorper in sem nec, rhoncus posuere tortor. Aenean vitae feugiat nisi. Proin elementum sollicitudin iaculis. Morbi nec erat volutpat, posuere augue quis, porttitor erat. Aliquam dignissim blandit laoreet. Donec consectetur a risus et varius. Suspendisse quis vulputate tellus.
Nunc eget erat id lacus dictum viverra. Vivamus vel vehicula ipsum. Fusce convallis leo diam, sed consectetur nulla sagittis rutrum. Curabitur nec ligula convallis ex rutrum fermentum. Donec auctor, erat quis euismod maximus, sem massa fermentum tortor, non scelerisque nibh nisi at arcu. Vivamus sodales fermentum nisi quis tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst.
Nunc et lacus ac augue tincidunt pellentesque. Sed at odio at sem lobortis vestibulum. Sed cursus augue et sapien eleifend tempor. Etiam suscipit mi non est vehicula tincidunt a vitae libero. In blandit fringilla lectus non dignissim. In interdum, nisl non suscipit sagittis, sem erat sagittis ex, quis egestas lorem tellus nec metus. Suspendisse suscipit ultrices nunc eget vulputate. Donec mollis condimentum massa. Suspendisse potenti. Fusce eget urna ut dui fringilla faucibus et id justo.
Suspendisse posuere justo eget bibendum venenatis. Pellentesque sollicitudin nisi augue. Nunc sed justo ac mi ultrices elementum sit amet non lorem. Maecenas accumsan vehicula urna, sit amet posuere dolor malesuada at. Morbi vitae mi sed est suscipit euismod. Aliquam erat volutpat. Nulla elit purus, elementum at odio eget, tempor efficitur leo. Nunc dapibus erat nec faucibus rhoncus. Curabitur accumsan nibh sit amet sagittis placerat. Donec mollis metus eu metus eleifend ornare.
</div>
</main>
</div>
I was wondering if there is a way to make a div with position fixed immobile, so if the user scrolls the div will be immobile to the initial position. I need it because I have a toast spawning inside another div, and I need this toast in foreground otherwise it will spawn inside the div (with scrollbar and partially visible).
That's an example image to explain better:
With position absolute:
With position fixed (the desired effect):
That's my component code (it's a child component):
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute; z-index:999; left:80%; width:300px;opacity:1;cursor:unset !important" *ngIf="!isCollapsed && onlyOnePopup == dataItem.Id">
<div class="toast-header" style="background-color: #00549F;">
<strong class="mr-auto" style="color:#fff;"></strong>
<button (click)="onlyOnePopup = null && isCollapsed = true" type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true" class="close" style="color:white;">×</span>
</button>
</div>
<div class="toast-body" style="font-family:Font; white-space:pre-line; color:black; cursor:unset">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
</div>
Use position: fixed, and then set the exact position that you want. Here's a snippet showing you an example of how to do it.
body {
height: 2000px;
background-color: aqua;
}
.fixed-div {
width: 200px;
heigth: 200px;
background-color: white;
padding: 50px;
position: fixed;
top: 0px;
right: 0px;
margin-right: 20px;
margin-top: 20px;
}
<html>
<head></head>
<body>
<div class="fixed-div">
Fixed Div
</div>
</body>
</html>
Instead of left: 80% try bottom: 0; right: 0 along with position: fixed; and then set right-margin accordingly.
the main thing is to set the height of html as 100vh (veriable height) and width to 100vw(veriable width). this will set your page to 100% of the space available in the browser window regardless of size. then set the toast div to fixed with the right and bottom set where you like (0 for bottom and right puts it in the lower right corner completly)
you cannot set a fixed point with no reference to what it should be fixed to. so by setting the html page size explicitly, the fixed position can be set based off that.
html {
height: 100vh;
width: 100vw;
}
.toast {
position: fixed;
right: 1rem;
bottom: 1rem;
background-color: rgb(0, 255, 255, 0.8);
padding: 1rem;
height: 2.5rem;
width: 15rem;
}
.display-content {
max-height: 100vh;
overflow-y scroll;
}
<div class="display-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur felis neque, et viverra tellus fermentum eget. Quisque nunc tellus, pulvinar id felis sed, sodales iaculis magna. Morbi sodales pellentesque sapien, nec dignissim augue. Integer odio enim, posuere et convallis et, ultricies in odio. Curabitur felis libero, iaculis et elit in, feugiat tempor augue. Duis finibus mattis leo eu facilisis. In faucibus tincidunt dui. Nullam pulvinar est vel mauris rhoncus euismod. Praesent vel pharetra neque, vitae sollicitudin enim. Nunc placerat sagittis malesuada. Suspendisse potenti. In tempus risus eget dapibus semper. Vestibulum vitae elit congue, tempor quam at, ultricies mauris.
</p>
<p>
Suspendisse ut ullamcorper libero. Quisque consectetur gravida nisi, non faucibus turpis iaculis nec. Phasellus vulputate, tellus sed dapibus dapibus, turpis mauris facilisis eros, eu sagittis quam ante eget felis. In nec nisl at lorem tincidunt vulputate vel eu est. Phasellus ipsum velit, placerat quis pulvinar non, auctor at ex. Nam pharetra dolor a semper feugiat. In sed commodo mauris. Aenean in turpis sed orci molestie efficitur quis id orci. Duis laoreet leo a nulla interdum hendrerit. Suspendisse molestie tristique semper. Vestibulum convallis purus et orci mollis sodales. Praesent ut lectus laoreet, suscipit velit nec, pharetra neque.
</p>
<p>
Morbi placerat metus a eros viverra, luctus ultricies eros fringilla. Nunc mollis lorem at lacus lobortis, vitae blandit ex condimentum. Maecenas et ultricies tortor, sit amet ornare risus. Nunc id nisl et ligula commodo vehicula in et risus. Pellentesque molestie et risus quis lacinia. Quisque quis risus laoreet, venenatis enim nec, hendrerit nisl. Nulla facilisi. Pellentesque pretium turpis vestibulum urna auctor sodales. Vivamus mattis sem eu tellus scelerisque tempus. Sed venenatis felis in mollis suscipit. Sed quis felis ac erat facilisis pellentesque eget nec purus. Phasellus libero odio, semper sed auctor at, ultrices non nibh. Proin consectetur metus sed ultrices aliquam. Pellentesque placerat, nibh vitae semper sodales, mauris elit vestibulum mauris, sit amet condimentum odio est tincidunt neque. Quisque metus lacus, ullamcorper non accumsan nec, placerat et lectus.
</p>
<p>
Vestibulum nec sem ex. Pellentesque volutpat quam eget justo rhoncus congue. Etiam in lorem pellentesque, pulvinar turpis non, dignissim nibh. Etiam eget urna congue, sodales nulla eget, fringilla lorem. Aliquam suscipit dapibus augue eget mollis. Phasellus feugiat sagittis massa, in posuere odio ultrices eu. Aliquam erat volutpat. Morbi eleifend augue vel sagittis pellentesque. Cras auctor interdum purus non fermentum. Aliquam erat volutpat. Integer elit mi, molestie vitae pulvinar vel, elementum et dui. Pellentesque leo risus, elementum eu accumsan nec, pharetra non massa. Phasellus pulvinar mollis aliquam.
</p>
<p>
Sed elementum facilisis erat, in molestie tortor varius ut. Vestibulum dapibus dolor quis mi malesuada, id venenatis ante vulputate. Aliquam fermentum viverra ante, sit amet rhoncus turpis laoreet vel. Vestibulum a vestibulum dolor. Mauris ut efficitur nunc. Donec sit amet consectetur orci. Ut at erat non sem mattis dictum. Aliquam vestibulum nulla nunc, nec varius est vestibulum sit amet.
</p>
<p>
Aenean imperdiet eros non eleifend molestie. Nullam venenatis nibh non pellentesque imperdiet. Quisque volutpat eros non odio convallis ultricies. Etiam convallis facilisis libero, a commodo tellus condimentum quis. Curabitur congue erat ut tincidunt eleifend. Donec tincidunt ullamcorper consequat. Etiam iaculis elementum fermentum.
</p>
<p>
Fusce vehicula libero nisl. Aliquam tempor sem at lacinia facilisis. Donec vestibulum sit amet augue non rhoncus. Nulla sagittis leo elit, a interdum metus dapibus in. Nulla in mattis nunc. Sed sit amet est in tellus vehicula molestie vel tempor nisl. Donec dignissim est lectus, ac pharetra neque bibendum nec.
</p>
<p>
Sed porta dui eget turpis scelerisque rutrum. Aliquam eu diam nec nunc ultrices hendrerit. Quisque convallis metus vitae tellus fermentum finibus. Cras id ullamcorper nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida lorem non blandit porta. Aliquam ac dui laoreet, interdum dui vel, pellentesque arcu. Aenean gravida nunc sit amet arcu rhoncus mollis. Nullam sit amet risus at urna dictum pharetra. Nunc maximus condimentum dui, sed hendrerit metus pretium et. Curabitur eu sollicitudin lorem, et luctus magna. Donec tincidunt id purus sed placerat. Proin vel tristique velit. Donec ornare nisi at laoreet luctus. Integer id metus molestie, fermentum massa non, porta diam.
</p>
<p>
Quisque at volutpat augue. Maecenas porttitor ornare scelerisque. Ut pretium sapien a placerat dapibus. Fusce vel urna eu sem blandit euismod. In imperdiet eros sit amet quam tempor aliquam. Morbi volutpat tincidunt massa, non convallis dui pharetra nec. Ut velit odio, pellentesque mollis sodales et, eleifend ac libero. Curabitur orci ante, varius ac congue id, rutrum id leo. Pellentesque massa massa, lacinia pretium sapien ut, dignissim congue ipsum. Aliquam commodo leo in nisl pharetra, sed viverra est auctor.
</p>
</div>
<div class="toast">This is a toast</div>
I am implement loading on scroll on a div it works perfect but elements from it can be removed by user as well. I want that div to be always scrollable but if user removes element from it scroll bar dissappers.
I have tried overflow-y: scroll and have added height as well. it works: there is a scroll bar always visible but the scroll bar has no thumb which means that i cannot scroll either by mouse wheel or using the arrow on scrollbar.
So it would be great if someone can help me in making the scrollbar thumb always visible.
here is the div that i am talking about :
<div id="external-events" class="mt-actions" style="height: 530px; width: auto; overflow-y: scroll;"></div>
Scroll
scrollbar without thumb
Please use overflow hidden until the mouse is over it, then make it auto.
Please note the 16px padding assumes a scrollbar is 16px wide, and is there so the text doesn't re-wrap when the scrollbar appears
Code snippet is below
div.myautoscroll {
height: 40em;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
<div class="myautoscroll">
<p>
This is a test for the stackoverflow question by Mathan
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tincidunt
odio sit amet eleifend. Nullam mattis posuere est, ut hendrerit ipsum ultrices
non. Aliquam erat volutpat. Aliquam hendrerit, odio at euismod fermentum, arcu
nunc sagittis enim, eget malesuada nulla risus rhoncus massa. In in varius
metus. Mauris consequat leo a sem pretium sodales. Cras facilisis porttitor
ultrices. Sed ipsum metus, luctus sit amet blandit at, facilisis vel mauris.
Morbi leo turpis, congue dignissim imperdiet eu, laoreet mattis turpis.
</p>
<p>
Etiam eu velit magna, et euismod ligula. Aenean non ligula at tortor accumsan
blandit eget ut lacus. Vivamus commodo nunc egestas dolor sagittis rutrum
egestas metus sagittis. Pellentesque mollis eros ut nisl auctor tincidunt. Cras
ullamcorper ultricies arcu, id tincidunt ligula cursus eget. Ut accumsan, dolor
et ultricies consequat, urna lacus blandit massa, nec vestibulum sapien sapien
sed sem. Nunc mattis lorem ornare mauris viverra vel mattis mi euismod. Vivamus
quis neque massa. Integer at est diam, vel molestie libero. Donec non ipsum non
mauris posuere auctor. Quisque ac sapien sit amet diam elementum sagittis quis
et urna. Maecenas adipiscing orci sed dui eleifend bibendum.
</p>
<p>
Suspendisse massa tortor, sagittis dignissim sodales vitae, porta id lorem.
Aliquam at enim non libero consequat blandit. Nunc eleifend fermentum diam
vitae condimentum. Aliquam molestie magna ut purus malesuada a rhoncus orci
aliquet. Sed lacus ante, fringilla ut accumsan non, fermentum eu nibh.
Phasellus quis nisi sem, at hendrerit eros. Proin faucibus sollicitudin
tristique. Donec et velit magna. Sed eu dolor eu dui fermentum aliquet. Etiam
sollicitudin egestas dui iaculis tempor. Aliquam quis mauris in augue luctus
condimentum ut quis turpis. Donec porttitor, sapien non interdum dignissim,
arcu nunc ullamcorper nisi, at sagittis enim nisi fringilla risus. Nulla vel
ipsum nulla. Aliquam fringilla quam dapibus sapien mattis at ornare massa
fringilla. Nullam sit amet lorem quis ipsum euismod imperdiet.
</p>
<p>
In hac habitasse platea dictumst. Fusce vitae urna id ipsum ornare molestie.
Sed non urna in lectus tempor dictum non quis metus. Phasellus at dolor eget
justo dapibus congue posuere nec dolor. Nunc hendrerit bibendum tincidunt.
Vestibulum scelerisque enim nulla, venenatis sollicitudin dui. Donec feugiat
condimentum velit, at ultrices felis sagittis elementum. Sed a massa massa,
quis scelerisque sapien. Etiam non est felis, quis imperdiet diam. Aenean felis
sapien, egestas blandit egestas non, imperdiet convallis risus. Nunc lacinia
aliquet adipiscing.
</p>
<p>
Integer eu eleifend nulla. Duis elementum malesuada lectus at pretium. Praesent
euismod nibh sit amet dui interdum nec interdum elit pretium. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis
molestie est eu nisi rutrum blandit. Nulla non luctus purus. Fusce fringilla,
dolor vel ultrices sagittis, quam purus aliquet urna, ac porta lectus velit ut
mauris. Maecenas lectus magna, imperdiet sit amet iaculis a, vestibulum nec
est. Sed tellus nibh, suscipit ut elementum vitae, venenatis placerat nibh.
Pellentesque mattis convallis iaculis. Fusce mauris ipsum, ullamcorper id
porttitor eu, luctus tincidunt lectus. Nulla facilisi. Aliquam erat mi, laoreet
nec condimentum sed, pulvinar a massa. Integer eget orci lacus, ut dapibus
arcu. Vivamus sollicitudin libero vitae libero ullamcorper interdum. Vivamus
egestas dignissim eleifend.
</p>
</div>
I am designing a page for a blog. The page has a fixed position sidebar, and a centered div for content. You can see it here. Here's my CSS:
.container {
width: 100%;
height: 100%;
text-align: center;
}
.sidebar {
position: fixed;
left: 0px;
top: 10%;
height: 80vh;
width: 10%;
background-color: red;
}
.content {
width: 40%;
display: inline-block;
text-align: justify;
}
<body>
<div class="container">
<div class="sidebar">
THis is the sidebar.
</div>
<div class="content">
<h1>Fourth</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna
sed consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>
<p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>
<p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar
in sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>
<p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>
</div>
</div>
<br/>
<p><em>This is the footer</em>
</p>
</body>
Currently all widths are as percentages. I do not want the content to span the whole width of the page (for easier reading). However on mobile devices (or when the screen width is small enough) I want the content to span the page. However with % widths, the content width constantly changes with the page width. It is ok on a computer screen but for smaller widths the content div becomes too narrow.
An example would be the website medium. You can see (as you resize the window) that for larger widths, the content width remains the same, but for smaller widths the content starts to span the whole page.
Any idea how to achieve that?
you can set a min-width in your .content with any value you may like, just remember you have a fixed sidebar
.container {
width: 100%;
height: 100%;
text-align: center;
}
.sidebar {
position: fixed;
left: 0px;
top: 10%;
height: 80vh;
width: 10%;
background-color: red;
}
.content {
width: 40%;
display: inline-block;
text-align: justify;
min-width: 260px
}
<div class="container">
<div class="sidebar">
THis is the sidebar.
</div>
<div class="content">
<h1>Fourth</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna sed
consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>
<p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>
<p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar in
sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>
<p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>
</div>
</div>
<br/>
<p><em>This is the footer</em>
</p>
You can use CSS special selectors: example:
#media screen and (max-width: 480px) {
.content {
width: 80%;
}
}
So that the .content will be set to 80% width on small screens.
You may also want to change the sidebar behavior for small resolutions, like setting up his position to initial and expanding his width to the same width as your content, so the design stay coherent.
Here's a fiddle (You need to resize the render frame by click and drag to see it in action )
https://jsfiddle.net/9c3ztska/1/
Now i will introduce to you something very usefull when designing responsive website:
It's a framework called Skel.
Long story short, it uses a grid system, wich let you specify specific size for a div for specific resolutions.
The grid system works with 12 units in width, so 12u represent 100% of the container width.
Here's a code example:
<div class="row">
<div class="6u 12u(small)"> YOUR CONTENT </div>
</div>
What it means:
Your content will be 50% of the container width on large screen, but will expand to 100% on small screens.
If you want to try it out and get fast in it, i recommend you to try baseline wich is a boilerplate using Skel framework.
You can download it and put it on your server (no db needed) and start coding.
baseline comes with pre-configured Skel and "breakpoints" (breakpoints are screen resolutions for wich Skel will swicth between CSS rules)
I am trying to make the following layout
-----------------------
|Header |
-----------------------
|A| B |
| | |
| | |
| | |
| | |
| | |
| | |
-----------------------
|Footer |
-----------------------
Where the following applies:
The header and footer stays in place with a fixed height, and full viewport width
A has remaining available height, width can be changed dynamically
B takes remaining available height and width. Reduces width when A is made wider and vice versa
B never flows to next line, no matter how wide the contents. (Instead a scrollbar).
I have tried a lot of table-row based positioning, and searched for similar qustions here on stackoverflow, but have not yet found any solution that works 100%.
Leaving the header and footer out of it, here is some CSS I have tried (B flows below A when making the browser window small, and the toolbar is 100% of the entire window - too high):
div#A {
display: inline-block;
height: 100%;
overflow: hidden;
margin: 0 0 0 0;
float: left;
width: 3.5em;
}
div#A.open {
width: auto;
}
div#B {
display: inline-block;
max-width: 700px;
float: left;
overflow:scroll;
white-space: nowrap;
}
Another approach (better, but B still flows below A instead of getting scrollbars):
div#wrapper {
display: table-row;
height: 100%;
width: 100%;
}
div#A {
display: table-cell;
height: 100%;
overflow: hidden;
margin: 0 0 0 0;
float: left;
width: 3.5em;
}
div#A.open {
width: auto;
}
div#content {
display: table-cell;
max-width: 600px;
float: left;
overflow:scroll;
}
Html
<header></header>
<main>
<div id="a"></div>
<div id="b"></div>
</main>
<footer></footer>
The header and footer stays in place with a fixed height, and full viewport width
//css
header, footer {
width: 5%; //fixed width that stay in place with a fixed height
}
A has remaining available height, width can be changed dynamically
//css
main {
width: 100%;
}
main #a {
float: left;
height: 100%;
width: 30%; //can be any width
}
B takes remaining available height and width. Reduces width when A is made wider and vice versa
/*#b will automatically take the rest of main!
because it has overflow:hidden */
#b {
overflow: hidden;
width: auto;
height: 100%;
}
B never flows to next line, no matter how wide the contents. (Instead a scrollbar).
Here i'm not sure what you want so the fiddle is lacking this part.
Do you want an ----> or
-|
-|
-|
-|
▼
Scrollbar? 1.
Replace overflow:hidden;
with overflow-x: scroll;
or overflow-y: scroll;
or overflow: auto for both ways
Fiddle for example :)
Try something like this:
<html>
<head>
<style>
#header
{
height:10%;
width:100%;
background-color:yellow;
}
#footer
{
height:10%,
width:100%;
background-color:red;
clear:left
}
#A
{
display:inline-block;
float:left;
height: 80%;
width: 5em;
background-color:green;
}
#B
{
display:inline-block
float:left;
height:80%;
background-color:blue;
overflow: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="A">A</div>
<div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec imperdiet ipsum, in dapibus nulla. Aenean iaculis lorem urna, at mattis metus ultricies ac. Aliquam sodales rhoncus metus, vitae fermentum ligula ornare nec. Nunc velit justo, ornare nec nulla eget, laoreet lobortis dui. Cras blandit odio dolor, a maximus nisl maximus a. Praesent nunc diam, euismod a iaculis vitae, mattis sed quam. Integer et luctus magna. Vivamus elementum arcu in leo suscipit, at aliquet arcu eleifend. Nunc tincidunt purus non orci feugiat tempor. In dapibus velit sapien, sed egestas erat lobortis sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed non efficitur erat. Nullam iaculis id tellus vel rutrum. Donec porta ultricies vestibulum. Phasellus congue enim ante, vitae posuere augue ornare vitae.
<br />
<br />Pellentesque dolor mi, ullamcorper non odio et, tincidunt rhoncus dolor. Maecenas cursus est nec sem varius fringilla. Praesent tempor sit amet est eget convallis. Nunc tempor tempus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sagittis sodales posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac lacinia felis. Fusce ultrices semper erat id imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis blandit orci. Vivamus pretium viverra ligula ac posuere. Vestibulum commodo, ante sed tempus lobortis, urna est porttitor dui, at dignissim massa nunc sed urna.
<br />
<br />Donec dictum lacus nec libero accumsan, auctor egestas metus sollicitudin. Nam pellentesque, ante quis lacinia tristique, sem dolor imperdiet mi, ornare consectetur tortor dui in mauris. Nulla facilisi. In sed dolor augue. Nulla ullamcorper felis vitae leo posuere posuere sit amet sed dui. Duis iaculis lorem porttitor risus iaculis congue. Mauris malesuada iaculis sapien vitae pulvinar. Nunc ut ipsum nibh. Aliquam vehicula quam eget malesuada lacinia. Curabitur eget magna ut erat pellentesque mattis sit amet eget ante. Cras et auctor felis. Nam justo diam, iaculis vel ligula sed, placerat lobortis lectus. Nulla dui enim, interdum eu posuere vel, sollicitudin non mauris.
<br />
<br />Morbi sit amet ultricies erat, vitae pharetra orci. Maecenas id lacus vestibulum, pellentesque ex eget, sollicitudin velit. Maecenas ultricies facilisis efficitur. Phasellus elementum tortor at ex convallis, in imperdiet nisi vulputate. Cras arcu tortor, faucibus et mattis vitae, aliquet vel ante. Nulla nec ipsum quis ex blandit elementum. In aliquam, elit ac aliquet faucibus, orci turpis tincidunt tortor, id suscipit erat urna at elit. Donec magna purus, vestibulum id erat vitae, iaculis sodales sapien.
<br />
<br />Quisque malesuada nunc vitae augue volutpat laoreet. Nulla egestas, nisi et fermentum congue, tortor neque finibus tellus, vel vulputate tellus tellus ut sapien. Integer fringilla posuere tellus ac mattis. Integer eget ultricies est. Aenean bibendum sapien vitae leo euismod vehicula. Curabitur venenatis ipsum quis porttitor facilisis. Morbi tincidunt condimentum urna, vitae pretium lorem pretium finibus. Vivamus volutpat erat nec tortor convallis mollis. Donec gravida orci ut elementum fringilla. Suspendisse fermentum, turpis id dapibus finibus, leo nulla suscipit sem, non aliquet ipsum est sit amet lacus. In hac habitasse platea dictumst. Aliquam pulvinar, erat in maximus maximus, eros velit blandit orci, id bibendum velit tortor non mi. Nulla risus tortor, semper sit amet nisi id, vestibulum efficitur augue. Ut quis ornare arcu, eu semper lectus.
<br />
<br />Nulla ut rhoncus orci. Duis et nulla commodo, mattis ligula imperdiet, aliquam arcu. Curabitur justo nulla, tristique sagittis convallis sed, convallis at purus. Donec urna nisi, ultrices a condimentum sed, ornare sit amet magna. Sed vel lacus eget lectus elementum efficitur nec vel velit. Sed sodales odio nec neque ornare, ac pulvinar eros tincidunt. Praesent interdum ac ligula non dictum. Vestibulum cursus hendrerit sollicitudin. Maecenas ultricies sapien viverra est aliquam, in pellentesque enim porta. Ut suscipit lorem at molestie malesuada. Aenean fermentum porta dolor, sed sagittis nisl tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut feugiat urna quam, a lacinia arcu placerat cursus. Integer lectus purus, eleifend et aliquam sed, consequat ac quam. Etiam et nisi enim. Quisque egestas pharetra erat et vehicula.
<br />
<br />Aenean convallis, purus at convallis vestibulum, nulla est pulvinar sem, ut varius dui elit et ligula. Donec porttitor rhoncus libero dignissim lacinia. Aenean eu nulla consectetur, mattis est ac, bibendum ante. Suspendisse vehicula nibh et mauris ornare, at finibus nulla aliquet. Aenean in scelerisque neque. Nulla quam lectus, consequat eu purus id, aliquam ultrices dui. Praesent et dolor pulvinar, imperdiet eros nec, lobortis justo. Mauris feugiat nulla a rhoncus aliquet. Cras ut imperdiet ante. Ut quis metus scelerisque, volutpat neque quis, pulvinar tortor. Nam placerat rhoncus lorem, non pharetra lectus auctor eget. Suspendisse in quam vitae augue blandit ultricies. Vivamus vulputate quam est, a pharetra erat porta eu. Quisque metus magna, porta eu euismod sed, porta sed erat. Aenean ornare, ante a scelerisque condimentum, ante velit aliquet arcu, vitae dictum nulla mi at massa. Quisque quis vestibulum velit, et placerat risus.
<br />
<br />Morbi cursus nibh eu ipsum mollis, non molestie leo auctor. Duis bibendum, neque eu tincidunt dignissim, nulla sem tincidunt metus, a lacinia risus libero eu nisl. Cras lobortis volutpat felis, in sollicitudin turpis tristique vel. Aliquam erat volutpat. Cras velit quam, tristique sit amet felis quis, consequat finibus nunc. Vivamus tempor nunc nec nibh mollis vulputate. Mauris pulvinar nibh ac eros fermentum luctus. Ut at orci ut est luctus pellentesque a quis nisl. Nunc posuere tellus ex, in porta felis vulputate vel. Donec rutrum faucibus risus. Donec sapien dui, porta quis volutpat eu, tincidunt eu quam. Sed eleifend pellentesque magna, vel tempus enim dictum tincidunt. Vestibulum nisl lorem, commodo vel ipsum quis, semper sodales leo.
<br />
<br />Vestibulum leo urna, sollicitudin eget ultricies at, scelerisque a lectus. Donec tellus sem, elementum et elit eget, lacinia posuere elit. In lacus ex, vehicula sit amet lacus et, dapibus molestie mauris. Donec ac justo metus. Sed eget faucibus dolor. Mauris sollicitudin vehicula augue, nec molestie est fringilla sed. Vivamus non neque arcu. Proin rhoncus justo in ex vehicula mollis. Nam at commodo neque. Sed consequat lacinia augue, ac iaculis enim cursus vitae. Aliquam varius augue ac condimentum vehicula. Vestibulum quis eros vitae elit maximus varius non eu ipsum. Nullam mollis urna nulla, et sagittis dolor mollis sit amet. Ut ut purus ac augue laoreet facilisis ac non lectus.
<br />
<br />Nulla tincidunt non diam nec posuere. Phasellus sodales bibendum magna iaculis ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies magna ac metus mollis tincidunt. Aenean dignissim egestas odio, id vestibulum ex ultricies in. Aliquam faucibus arcu eu enim maximus, vel hendrerit ipsum aliquet. Vestibulum posuere urna a tortor dapibus malesuada. Curabitur feugiat magna id dolor fringilla, quis suscipit lacus pellentesque. Pellentesque tristique sem urna, ut luctus erat mollis ut. Vivamus eget ultrices est, nec facilisis nisl. Integer cursus auctor lorem ut imperdiet. Vestibulum finibus odio sit amet sapien pulvinar egestas. Nunc tincidunt mi sed ex faucibus dictum. In sed tempor libero. Donec tortor nulla, malesuada vel urna laoreet, commodo interdum velit.</div>
<div id="footer">Footer</div>
</body>
</html>
overflow: scroll gives you the scroll bar and white-space: nowrap takes away the word wrapping.