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'm trying to achieve a layout with HTML/CSS that has a header with no set height, and a sidebar and content area next to each other below the header that take up the remaining height of the screen. In addition, the sidebar often has so many links that the links scroll off the screen, but instead of that happening, I would like to add a vertical scrollbar to just the sidebar section, and not have there be a scrollbar for the entire page.
I've been trying everything I can think of and find online, but nothing seems to be working. Here's some basic HTML/CSS to demonstrate the layout and the problem:
<!DOCTYPE html>
<html>
<head>
<style>
body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow-y: scroll;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
Does anyone have any good ideas and/or know how to solve this problem? Thank you.
body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
height:100vh;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
height:1px ;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow: auto;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
overflow :auto ;
}
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper porta ante, sit amet euismod ipsum venenatis vitae. Mauris ut tristique nibh, a ultricies nulla. Nullam fermentum eu mi ac cursus. Integer semper suscipit ex eu mattis. Phasellus iaculis ultricies ornare. Suspendisse ut nisi diam. Nunc pellentesque lacinia turpis vehicula pharetra. Aenean aliquam cursus elit nec fermentum. Morbi sed tempor nunc. In efficitur arcu ut finibus ultricies.
Suspendisse cursus semper semper. Praesent elit metus, venenatis vitae dictum eu, viverra ut tellus. Vestibulum ornare dui sit amet enim consectetur ornare. Cras porttitor nisl ultrices erat laoreet, ut ultricies quam condimentum. Duis a magna quis mi consequat facilisis id id dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer suscipit odio nibh, quis fermentum tellus hendrerit et.
Nam et euismod eros, id porttitor velit. Ut eget porttitor nibh, non interdum magna. Donec facilisis quis orci pharetra semper. Curabitur hendrerit massa interdum lacinia cursus. Aenean rutrum, lectus non efficitur sodales, sem lacus volutpat lectus, sed pharetra nisl metus in tortor. Integer eu turpis turpis. Phasellus eu placerat metus. Aenean ac massa consequat, consequat erat non, sollicitudin mi. Vivamus porttitor mattis accumsan.
Duis justo elit, finibus quis hendrerit at, ultricies quis nulla. Donec lobortis orci libero, eget dictum ipsum cursus ut. Phasellus vitae pellentesque risus. Mauris et dictum eros. Donec consectetur erat odio, nec semper nibh lacinia ac. Vestibulum rutrum laoreet rhoncus. Fusce dictum ut dui a fermentum. Donec hendrerit volutpat elit non ornare. Curabitur at neque semper, blandit lorem et, varius eros. Suspendisse nec turpis nec diam gravida pharetra.
Morbi turpis nulla, feugiat et egestas in, tempor sit amet ipsum. Nam ac arcu aliquet, congue ipsum ut, lacinia velit. Nulla neque nulla, vulputate in ex nec, laoreet gravida enim. Sed finibus turpis quis dapibus tincidunt. Phasellus elementum tincidunt neque sed porta. Etiam non finibus libero, vitae ullamcorper erat. Nullam lobortis eget diam eget vestibulum. In non dolor sed mauris finibus tempus non et justo. Nam convallis nec elit quis tempor. Vivamus ultricies pellentesque lectus nec commodo. Sed et molestie lacus, non gravida enim. Vivamus feugiat tempus ipsum ac eleifend. Nulla id mi tempor, tincidunt justo fermentum, convallis orci.
Fusce finibus placerat sapien at luctus. Mauris non velit diam. Vestibulum vel porta tellus, aliquet vulputate mi. Aenean a turpis ac urna gravida porta et sit amet ante. Phasellus vehicula feugiat leo ut faucibus. Curabitur porta, leo id auctor viverra, lorem nulla maximus turpis, eu laoreet leo risus id urna. Nullam finibus lectus ante, eget ultrices velit tempor ut. Maecenas quis tincidunt tortor. Nam eu facilisis libero. Morbi fermentum dolor sit amet lorem dictum aliquet. Curabitur porta nisl sed velit facilisis rhoncus. Duis eu eros quis metus blandit efficitur. Aenean venenatis est ante. Vestibulum quis laoreet dolor, sed bibendum metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras feugiat, dui vel lacinia scelerisque, lacus urna tempor quam, sit amet iaculis diam nulla et felis.
Curabitur ac accumsan arcu. Donec at euismod nisi, sit amet interdum sapien. Phasellus efficitur, felis ut condimentum accumsan, tortor ipsum convallis massa, ac iaculis quam metus quis nulla. Fusce vel turpis porta, tempor ex non, eleifend ante. Etiam nibh erat, interdum eget commodo nec, interdum eu orci. Vivamus eleifend nunc sed neque cursus pretium. Vestibulum non nisl eros. Fusce cursus tristique eros a finibus. Mauris vel massa tempor, vestibulum lorem in, bibendum urna. Donec cursus dolor nunc, sed lobortis tellus scelerisque ut. Nunc venenatis tincidunt neque eu gravida. Vestibulum quis ante eu velit interdum vulputate.
Vivamus sit amet mollis justo. Quisque sit amet molestie libero. Nam ut tempor dui, a commodo tortor. Quisque vehicula congue maximus. Proin dignissim ante nisl, eget ullamcorper lorem vestibulum sed. Vestibulum commodo porttitor vulputate. Sed augue ante, hendrerit et tincidunt maximus, pretium et tellus. Morbi et tortor eu nisl dignissim pulvinar. Morbi dignissim dictum metus vel lobortis. In sit amet tellus sit amet dui auctor tincidunt ac in nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id metus lacinia, cursus ex in, gravida nibh. Ut mollis mi at urna gravida, in sagittis sem dictum. Nullam pretium dolor mauris, eget lobortis libero euismod a. Maecenas aliquet dolor dolor, cursus malesuada erat ornare ac.
Pellentesque ultrices semper tortor non fermentum. Fusce pellentesque fermentum justo eu placerat. Donec tincidunt dolor id nunc vehicula mattis. Suspendisse fermentum libero vel est sollicitudin, non interdum urna placerat. Cras dignissim nibh id tincidunt pellentesque. Quisque ac cursus enim. Phasellus pretium varius aliquam. Mauris arcu enim, posuere sit amet est eu, vestibulum euismod sapien. Etiam sed velit consequat, dictum turpis eu, vehicula orci. Morbi tincidunt sit amet erat in mattis. Curabitur ac nisi sit amet ipsum ultrices tempus vel et est. Vivamus ornare dolor vel ligula ultrices tempor.
Nunc id ultrices sapien. In hac habitasse platea dictumst. Quisque tempus cursus tellus, quis ultricies neque commodo ut. Integer bibendum orci vitae metus fringilla, quis tristique dui iaculis. Vestibulum eu velit et leo facilisis rhoncus sit amet at tortor. Morbi dignissim ante ut neque lacinia dictum. In vel risus at ex lobortis laoreet et nec leo. Mauris rutrum orci sollicitudin ex rhoncus ultrices.
Nunc dapibus pulvinar ex sed sollicitudin. Donec nec luctus tortor. Phasellus porta, ipsum sit amet sagittis sagittis, lectus sem vestibulum enim, et placerat velit diam sit amet leo. Curabitur turpis mi, eleifend eu porttitor mattis, aliquam sed ipsum. Pellentesque gravida condimentum sem, id laoreet erat vulputate in. Nulla facilisi. Mauris in eros vel sapien accumsan viverra eget sed est. Ut arcu orci, accumsan faucibus ipsum ut, accumsan luctus eros. Proin eget dui aliquam, dictum elit in, malesuada odio. Sed non arcu molestie, dignissim odio ut, sagittis neque. Duis sit amet quam massa. Mauris tempor, eros a placerat ornare, odio dui dapibus orci, quis feugiat libero neque posuere quam. Sed gravida velit purus, ut laoreet tortor mollis sit amet. Aliquam rutrum non lorem nec interdum. Pellentesque ornare blandit mattis.
Aliquam non commodo felis. Maecenas scelerisque elementum arcu, at tincidunt elit fringilla et. Nam ut felis dapibus elit accumsan sollicitudin id at ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque tincidunt mi interdum dui porta, ut tristique nibh auctor. Vestibulum in aliquam quam. Ut suscipit fringilla tellus, et elementum ligula finibus id. Curabitur auctor tincidunt finibus.
Donec sit amet orci pharetra, tempor orci in, placerat felis. Cras aliquam augue a lacus molestie, efficitur ultrices odio porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend arcu quis eros ultricies lobortis. Curabitur dignissim mi id feugiat finibus. In eu sodales sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Sed nec auctor velit. Vivamus pellentesque eget risus eu luctus. Etiam ac odio vitae quam semper vulputate quis non nulla. Pellentesque eget luctus turpis, quis volutpat tellus. Sed commodo accumsan magna ut dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut congue, magna id sagittis cursus, neque risus ultricies libero, et posuere est est ac mi. Donec quam urna, lobortis nec nibh convallis, auctor vehicula augue. Vestibulum turpis massa, placerat ut felis sit amet, maximus malesuada turpis. Integer scelerisque nisl sagittis, tempor quam vitae, feugiat tellus.
Phasellus efficitur, risus eget suscipit rhoncus, enim enim tempor elit, id tempor nibh metus vel elit. Suspendisse mattis lacinia sollicitudin. In urna dolor, eleifend a cursus ac, varius a lectus. Phasellus vestibulum, libero id congue venenatis, risus leo fringilla odio, ac dapibus augue enim vestibulum mauris. Nulla sit amet dignissim sem. Sed convallis eros non neque laoreet mollis. Sed at ex ligula. Vivamus luctus, urna nec fringilla faucibus, nisl est accumsan quam, eget gravida nisl odio at sem. In lacinia, diam ut faucibus pellentesque, mi ligula elementum est, et porta mauris tellus sit amet eros.
Donec luctus quis dui vel ornare. Vestibulum feugiat enim et semper tempor. Nullam dictum pellentesque orci. Aenean eleifend dolor at condimentum tincidunt. Sed molestie felis vel ipsum ullamcorper vulputate. Donec vel urna ac mi consectetur imperdiet eget eu arcu. Curabitur elit ante, sollicitudin vel convallis sed, molestie id justo. Vivamus lacinia risus eu mi suscipit gravida. Ut vitae ex pulvinar, rhoncus erat non, efficitur purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec est velit, ultricies a lacinia sed, faucibus ut erat. Nullam ut mi tincidunt, porttitor lacus sed, euismod velit. Nunc scelerisque lacus a lectus eleifend, tempus mollis urna rutrum.
Nam eget lobortis nisl. Pellentesque sed venenatis elit. In auctor volutpat posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut cursus nunc augue, ac egestas tellus iaculis eu. Vivamus ultrices cursus mauris, ac bibendum eros accumsan eu. Aliquam id tincidunt purus. Sed sodales consectetur odio porttitor pulvinar. Donec sodales mattis sem, id elementum leo ornare at. Aenean blandit id magna a placerat.
Suspendisse quis tincidunt leo. Maecenas sapien massa, consequat at pharetra et, sodales vel velit. Ut convallis volutpat nibh id eleifend. Vestibulum molestie mauris ac ornare fringilla. Aliquam ipsum felis, fermentum eu lacinia nec, faucibus at nunc. Donec imperdiet, turpis non consectetur sodales, orci dolor ultricies magna, quis porttitor massa ligula ultrices magna. Vivamus auctor neque eros, nec dictum nulla vestibulum non. Pellentesque luctus, urna nec imperdiet maximus, nisi nibh suscipit ipsum, eget luctus leo ex quis lorem. Praesent in ex vitae urna laoreet imperdiet. Phasellus pulvinar ipsum vitae dui ultrices suscipit. Aenean est ipsum, ornare eget porta sit amet, tincidunt sed dui. Nam et urna porttitor, tempor magna ac, semper nisi. Vestibulum nisl purus, laoreet non ex a, ultricies finibus dolor.
Maecenas id sapien semper, luctus ante in, aliquet mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in odio magna. Aliquam pulvinar euismod ligula eu imperdiet. Integer condimentum nulla magna, feugiat ullamcorper ipsum dictum ac. Suspendisse id tempor neque, vitae blandit urna. Fusce eget tempus erat. Sed sit amet elit vitae nisl maximus dictum eget et nisl. In egestas at leo sed lacinia. Pellentesque at hendrerit neque, quis pharetra nunc. Donec dignissim erat in libero porttitor cursus.
Maecenas pellentesque tempus dapibus. Aenean sodales interdum dolor, sed iaculis erat luctus ac. Morbi interdum feugiat nisi, sed eleifend quam vehicula a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed malesuada arcu sed lectus placerat, eget blandit purus luctus. Cras tristique ligula neque. Vestibulum finibus nunc ac ex ultricies, eget aliquam leo iaculis. Duis vestibulum imperdiet eros in vulputate. In ex odio, dictum aliquet dui at, elementum ultricies justo. Ut pulvinar condimentum dui, tincidunt faucibus nunc tempor at.
Quisque eleifend diam a lorem euismod, vitae dictum eros euismod. Pellentesque sed vehicula ante, ut laoreet libero. Suspendisse eget massa sollicitudin tortor viverra ultrices id vitae lorem. Donec sagittis nunc ut hendrerit lacinia. Donec elementum tellus efficitur felis cursus mollis. Etiam quis erat massa. Nullam eu dui felis. Suspendisse pulvinar leo augue, vel fermentum ex feugiat sed.
Morbi sagittis fermentum massa, vitae dictum orci. Aliquam fringilla, elit at condimentum congue, lacus libero porttitor urna, vel efficitur ante ante pulvinar risus. Aenean non enim nulla. Nullam eget elit ut lorem tincidunt malesuada. Curabitur dapibus eros molestie felis commodo tristique. Quisque non mi in nunc ultrices malesuada at ut dolor. Nullam metus mauris, aliquam id accumsan ac, efficitur ut felis. Ut purus lacus, consectetur quis dolor a, sagittis luctus est. Praesent tristique interdum sapien ut scelerisque. Proin nisi sem, luctus eu massa vitae, tincidunt tristique urna. Phasellus a nibh ut magna pretium convallis eget non justo. Ut id arcu sit amet nisi sollicitudin convallis sed sed dolor. Proin fermentum non ex et volutpat. Donec vitae erat rutrum, laoreet dui at, egestas arcu.
Etiam lobortis sodales mollis. Maecenas nec neque malesuada est ullamcorper venenatis eget ut lacus. Suspendisse maximus pretium tincidunt. Etiam a auctor mi. Morbi sollicitudin metus nec dolor porttitor, ac placerat arcu tempus. Sed turpis mi, cursus sit amet egestas ac, consequat sit amet nulla. Suspendisse dapibus malesuada blandit. Donec aliquet ligula urna, vel venenatis nibh facilisis sed.
Fusce volutpat ex et leo sagittis, eu posuere sapien scelerisque. Proin eget nisi sed metus accumsan suscipit in id leo. Quisque ac rutrum velit. Nulla id convallis libero. Duis euismod feugiat sodales. Aenean placerat, est nec convallis luctus, massa leo finibus nunc, in viverra dolor nunc at arcu. Cras lobortis rutrum vestibulum. Integer pellentesque placerat sapien non mattis. Maecenas in velit mi. Cras finibus in felis nec ullamcorper. Aenean ut est et felis elementum efficitur at vitae lacus. Maecenas aliquam dapibus massa, et semper lacus vulputate et.
In imperdiet convallis tellus ut semper. Quisque placerat eros id condimentum faucibus. Nulla et faucibus elit. Nunc tincidunt risus eget velit cursus semper. Etiam viverra nibh eget turpis gravida ultrices. Cras eget iaculis tortor, vehicula consequat est. Pellentesque blandit nisl id neque ultrices, in tempus quam facilisis.
Aenean feugiat felis sed ligula tincidunt suscipit a elementum dui. Phasellus laoreet lorem sit amet nisi varius, sit amet tincidunt augue dictum. Ut dictum ipsum finibus, pellentesque odio vel, accumsan odio. Proin porttitor risus lectus, commodo tristique diam commodo et. Integer ornare vel dui sit amet placerat. Quisque tellus purus, pharetra eget mi sit amet, faucibus imperdiet dui. Aliquam malesuada sapien eu enim laoreet, nec blandit lacus pulvinar. Ut in diam condimentum, iaculis mauris eget, venenatis ipsum. Donec finibus diam arcu, sit amet laoreet leo consectetur in. Duis erat turpis, consequat sed ornare sit amet, feugiat ac purus. Aliquam erat volutpat. Duis elit lacus, commodo id leo sed, congue consequat lectus.
Mauris facilisis et ligula id faucibus. Nunc non lobortis metus, tristique finibus tortor. Fusce interdum interdum felis elementum dignissim. Vivamus diam nisi, dictum dapibus consectetur ut, laoreet vel est. Vivamus posuere consectetur dui, in vehicula felis interdum nec. Pellentesque tincidunt magna turpis, a vehicula ante pellentesque sit amet. Nullam id feugiat nisl, eu blandit felis.
Suspendisse consequat enim at enim sagittis, sed feugiat tellus iaculis. Vestibulum volutpat dignissim porttitor. Vivamus at ante nec augue tempus laoreet. In volutpat risus at ipsum gravida tempus. Sed et vulputate dui. Praesent eget tempus mauris. Vivamus congue tellus at lacus sollicitudin luctus vitae quis est. Vivamus interdum nisi ut neque mattis, a suscipit lacus tempor. Vestibulum tellus orci, scelerisque sodales metus eu, cursus aliquam elit. Nunc porta fringilla turpis, ac varius arcu blandit ac. Nulla ornare ligula non tortor hendrerit dictum.
Aliquam lobortis, lectus sit amet blandit pulvinar, risus quam condimentum diam, convallis tristique lacus est non mi. Sed eu felis purus. Sed velit justo, posuere eget porttitor eget, vehicula vel neque. Suspendisse malesuada, nunc nec auctor cursus, lorem dolor rutrum dolor, ut scelerisque nibh nisi sed justo. Nullam ac orci non nisl varius porttitor. Vestibulum non lorem at mauris malesuada interdum vel quis dolor. Pellentesque porttitor erat vel sem venenatis feugiat eget vitae nisi. Sed tempus urna vitae egestas consequat. Curabitur vitae porttitor erat. In augue sem, sodales eget velit ut, pulvinar consectetur sem. Mauris rutrum erat vitae placerat egestas. Ut est odio, semper ut augue et, luctus sagittis risus. Curabitur ex est, ultrices nec neque consequat, dapibus malesuada magna. Aliquam erat volutpat. Vestibulum ipsum turpis, ultricies vitae tortor nec, malesuada sagittis orci.
Cras consequat mi odio. Proin vestibulum vestibulum efficitur. Ut et neque sapien. In sit amet ipsum in sapien molestie auctor ut eu diam. Aenean ornare erat ut felis faucibus, quis laoreet dui pretium. Praesent porttitor imperdiet mauris, eget consequat lectus lacinia a. Nam maximus eleifend velit, ut ultrices orci finibus nec. Donec id sapien ut erat fermentum vulputate in vel risus. Fusce neque ante, semper at euismod in, mollis sit amet neque. Fusce gravida pretium sapien, a eleifend nisi euismod sit amet. Vestibulum vulputate dapibus dolor non tempor. Proin eros velit, ornare vel ultrices non, faucibus at diam. Praesent pretium tempor arcu. Cras semper pellentesque commodo. Cras nec urna in tortor molestie varius in vitae odio. Ut finibus lacus ut est tristique suscipit.
Donec interdum magna urna, vel posuere nisi pellentesque sed. Nam quis mi sit amet quam laoreet eleifend. Aenean quis tellus non nulla auctor fringilla. Nunc felis arcu, volutpat quis porta vel, molestie at massa. Morbi vitae enim urna. Etiam euismod facilisis leo, vel dignissim nisi tempus sit amet. Aliquam aliquam cursus nibh, faucibus pharetra quam.
Maecenas luctus, velit ac malesuada egestas, leo nunc elementum neque, at porttitor ligula augue in odio. Sed tempus egestas dui, vitae varius metus volutpat id. Aliquam ornare, lacus posuere sollicitudin vehicula, felis diam consequat arcu, a laoreet nulla erat non nisl. Proin cursus ut tellus at condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin finibus enim et faucibus dignissim. Donec non ex vulputate, interdum orci ut, dignissim urna. Nulla rhoncus sollicitudin congue. Mauris semper arcu a massa malesuada scelerisque. Quisque ligula metus, condimentum nec interdum eget, efficitur in nunc.
Phasellus vel luctus dui, quis ornare orci. Etiam sollicitudin, neque at venenatis luctus, felis ante accumsan velit, nec molestie erat risus vel odio. In interdum maximus enim lobortis laoreet. Vivamus nisi odio, suscipit sit amet dui vel, consectetur mattis velit. Ut scelerisque sem eget tortor hendrerit, non bibendum enim rhoncus. Aenean id sem feugiat, eleifend leo nec, volutpat diam. Phasellus eget semper elit. Suspendisse vitae magna a ligula hendrerit malesuada. In magna velit, luctus at eros vitae, dignissim vehicula neque. In quis ex vel risus imperdiet feugiat eu vestibulum lorem. Nullam porttitor enim sed leo ornare, ac posuere tortor molestie. Fusce accumsan rutrum dictum. Aenean in erat neque. Maecenas rhoncus enim id nisl posuere, vel tristique neque vehicula. In efficitur, mauris non semper semper, justo mauris gravida ligula, ac bibendum sem lacus et diam. Nullam gravida sit amet diam et tristique.
Nulla urna justo, condimentum ut rhoncus vel, imperdiet sed mi. Aliquam venenatis, neque et facilisis placerat, dui felis lobortis diam, a pulvinar nibh velit fermentum tortor. Quisque nec commodo nibh, vitae varius elit. Cras sem dolor, fermentum ac dignissim eget, mattis in libero. Vivamus condimentum, diam et consectetur blandit, elit elit faucibus justo, condimentum rhoncus dui mi a ipsum. Aenean sit amet tellus leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eu sodales ipsum. Etiam blandit nibh sit amet nunc interdum viverra. In hac habitasse platea dictumst. Sed eget ligula nec metus vestibulum elementum. Nulla in dolor eget risus laoreet fermentum. Aenean vitae accumsan erat, ac fermentum libero. Fusce efficitur tincidunt nibh, vel fringilla orci consectetur vitae. Ut eget porttitor mi.
</div>
</div>
</div>
This question already has answers here:
Creating a variable height "fixed" header in CSS with scrollable content
(5 answers)
Closed 3 years ago.
I am making a basic website with a sticky Navigation Bar, When I add text to the website, the top rows are hidden behind the Navbar. Is there any way for me to position the text to start below a certain pixel, or something like that?
Obviously I can just spam p tags until it works, But since this will be a reoccurring problem I would like to know how to fix it properly.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.navbar {}
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis
ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis
sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem
gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum
ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc. Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien
dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem
sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare. Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit
tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi
varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique
sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p>
</div>
You just add this CSS in your code.
.content{
margin-top: 40px;
}
Maybe a padding. This is what I do.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.content {
width: 100%;
position: relative;
float: left;
padding-top: 40px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis
ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis
sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem
gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum
ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc. Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien
dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem
sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare. Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit
tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi
varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique
sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p>
</div>
Margin-top u have to give
<!DOCTYPE html>
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.navbar {
}
.content{
margin-top:
55px
}
</style>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc.
Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare.
Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p></div>
</body>
</html>
While scrolling i'm trying to fix a p tag with my name on it on the top of the page but nothing seems to be working for me.
<div id="page-content-wrapper">
<p class="logo "><b>Mostafa</b> Masri</p>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<style>.logo {/*position: sticky;*/ top: 60px; /*left: 77px;*/ font size: 21px; text-transform: uppercase opacity: .8; margin: 0; position:absolute; top: 0; right:0; padding:19px;} </style>
Here's a possible solution using position: fixed.
.logo {
position: fixed;
top: 10px;
right: 10px;
font size: 21px;
text-transform: uppercase;
opacity: .8;
margin: 0;
padding: 19px;
}
<div id="page-content-wrapper">
<p class="logo ">
<b>Mostafa</b> Masri
</p>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">≡</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at augue quis nulla iaculis tempus. Nunc ornare tempor justo ac pretium. Fusce lobortis tortor nunc, egestas aliquet sem congue eget. Nullam sed porttitor tortor, at suscipit nunc. Sed eget
diam sed lectus varius convallis. Sed interdum semper auctor. Nam vel nisi nisi. Etiam sem lacus, gravida sit amet odio sit amet, convallis pellentesque velit.</p>
<p>Aliquam pulvinar eu magna nec rhoncus. Nulla vel felis nec nisi faucibus varius sit amet in velit. Integer posuere eleifend metus, ac placerat erat elementum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum diam libero, rhoncus
at pretium a, ultrices eu mauris. Pellentesque blandit pretium mi eget lacinia. Nullam erat est, congue ultrices viverra eget, iaculis sit amet velit. Ut tempus lacinia ante, non venenatis leo. Fusce quis ipsum maximus, mattis felis at, feugiat lacus.
Morbi condimentum semper mi ac porttitor. Maecenas aliquam auctor mi, nec accumsan mauris congue a. Praesent rutrum porta sapien in scelerisque. Cras vehicula, tortor non hendrerit dictum, ex justo lacinia nulla, vitae dapibus nibh eros nec mauris.
Nulla sodales hendrerit odio et efficitur.</p>
<p>Fusce vel tempor elit, quis pharetra enim. Suspendisse potenti. Donec a arcu fermentum, venenatis tortor ac, mollis ante. Nullam vitae quam quis leo tempus iaculis id eget nibh. Maecenas consequat quis ante at lacinia. Donec auctor vel leo ut pretium.
Vestibulum hendrerit, nunc non scelerisque condimentum, dolor urna convallis sem, pulvinar vestibulum elit ante eget quam. Nunc pretium, lectus vel tincidunt lacinia, massa neque posuere felis, non tristique ipsum ante vitae dui. Mauris vitae nulla
quis mi congue eleifend non eu libero. Maecenas sit amet felis eu urna aliquam efficitur et congue nisi. Praesent sagittis nisi porttitor velit consequat, in feugiat quam ultrices. Cras sit amet enim ante. Fusce mi urna, volutpat semper justo ut,
feugiat mattis elit. Sed quis volutpat justo. Fusce pretium venenatis massa a aliquam.</p>
<p>Sed eu ultrices felis, et luctus metus. Donec justo felis, congue eget dui nec, commodo porttitor felis. Sed eu dui et risus condimentum rhoncus. Sed interdum libero ac risus convallis, sed placerat tortor interdum. Phasellus nec tristique eros, a ullamcorper
ex. Aliquam nulla nunc, placerat et urna vitae, eleifend condimentum arcu. Nullam diam arcu, dignissim eu lacus ac, porta pulvinar arcu. Sed ultrices luctus leo, ac blandit mi pellentesque a. Nunc ornare, arcu consectetur bibendum hendrerit, nulla
diam finibus est, non porta ligula erat vitae velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sodales arcu a lacus luctus, non mollis neque placerat. Praesent lacinia nisl id lectus feugiat condimentum.
Vivamus convallis aliquam est vel sagittis. Etiam ullamcorper consequat sapien, ornare porttitor massa luctus non. Ut purus tellus, maximus eu iaculis a, porta ac mi.</p>
<p>Praesent suscipit risus vitae magna aliquet, sed egestas ipsum eleifend. Suspendisse tincidunt dolor at est rhoncus mollis. In convallis iaculis diam id finibus. Integer et mi blandit, imperdiet arcu in, accumsan velit. Pellentesque vitae tristique
odio. Pellentesque facilisis dolor at suscipit ultrices. In hac habitasse platea dictumst. Sed molestie ante quis rutrum vestibulum. Phasellus interdum eros ut sem porta, non facilisis velit fringilla.</p>
</div>
This question already has an answer here:
CSS - div aligning to the bottom of parent div (inline-block)
(1 answer)
Closed 7 years ago.
I'm learning HTML, and wrote up the following to try and create a side navigation menu:
<html>
<head>
<style>
* {
border: 2px solid red;
}
#mainBody {
}
#mainNav {
display: inline-block;
width: 20%;
}
.navMenu {
list-style-type: none;
}
#mainContentBody {
display: inline-block;
width: 75%
}
</style>
</head>
<body>
<header>
<p>This is a header!</p>
</header>
<section id="mainBody">
<nav id="mainNav">
<ul class="navMenu">
<li> Pascal Cropped </li>
<li> Ethics Excerpt </li>
<li> Pascal Cropped Again </li>
</ul>
</nav>
<section id="mainContentBody">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisl mollis, sodales neque id, efficitur velit. Aliquam et ultricies purus. Nulla facilisi. Mauris id pulvinar ipsum, ac commodo ipsum. Nunc non facilisis augue. Suspendisse nec lacus ullamcorper, ultricies augue nec, consectetur enim. Donec fermentum suscipit dapibus. Nunc quis interdum nibh, vel aliquam nunc. Nunc non tincidunt sem. Nullam vitae dapibus metus. Curabitur eget dignissim lectus. Vivamus tempus sagittis eros sit amet aliquet. Integer tincidunt porta leo ac suscipit.
Quisque a feugiat erat. Proin non ante ut leo aliquam aliquam. Etiam tempus volutpat nulla sed commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet est et rutrum dapibus. Cras luctus id ex vel volutpat. Suspendisse porttitor, mauris vitae dapibus convallis, felis eros maximus ex, vitae sodales ante nulla eu quam. Curabitur nec metus nisi. Nunc dapibus orci condimentum lobortis dictum. Proin augue orci, pharetra a mollis vel, ornare id tellus. Pellentesque lectus leo, maximus et risus id, gravida ornare diam. Etiam eget metus quis quam feugiat mattis. Praesent vitae elementum metus.
Fusce volutpat fringilla ex, sit amet imperdiet sapien efficitur a.
</p>
<p>
Proin gravida orci diam, vitae placerat ligula hendrerit vel. Donec turpis nulla, lacinia vel justo in, consequat elementum tellus. Vivamus ut gravida metus. Aliquam lobortis, dolor nec pulvinar venenatis, lorem enim viverra sapien, vitae ultricies velit nisl vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut a tincidunt lorem, non mollis neque. Nullam interdum dolor luctus ornare gravida. In tempus diam lectus. Sed tempor, purus in convallis suscipit, nisi nibh vehicula augue, et iaculis nisl nisl vestibulum justo. Integer posuere cursus velit, et iaculis justo aliquet et. Sed dapibus egestas neque, tincidunt aliquam nisl dapibus at. Morbi malesuada pellentesque posuere. Fusce a libero at mauris maximus maximus eu sed mi. Vivamus est nulla, viverra non felis at, elementum condimentum lacus. Sed sodales enim non tortor faucibus imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus est diam, mollis non purus non, posuere porta est. Donec vestibulum consequat massa vitae dictum. Sed eu lectus sed leo dignissim rutrum. Donec efficitur imperdiet purus, quis iaculis risus accumsan a. Integer ac erat id odio fringilla elementum. Pellentesque egestas ex eleifend, mollis nunc a, feugiat dui. Duis interdum id arcu vel aliquam. Aenean fringilla quam dolor, ut tempor elit cursus ut. Sed congue dui sit amet risus egestas rutrum. Nam dictum porttitor turpis, sit amet suscipit nunc consectetur ut. Donec at tincidunt nibh. Vestibulum sagittis pharetra eleifend.
Aenean pharetra, mi ac mattis suscipit, eros ante vehicula tellus, egestas ultricies felis elit sed ex. Suspendisse in nisl elit. Nullam nec libero nisl. Nulla tincidunt purus sapien, sed pulvinar diam varius non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non libero sed lorem dignissim hendrerit. Proin felis tortor, dignissim ac maximus ornare, consectetur vitae velit. Aenean nec accumsan felis. Proin vitae fringilla magna. Pellentesque sagittis purus sed finibus pretium. Nam nec ante dapibus odio suscipit mattis. Nulla in nisi convallis, pulvinar leo ac, fringilla nisl. Nam a dictum dolor.
</p>
</section>
</section>
</body>
</html>
For some reason though, the side menu is positioned at the bottom of #mainBody, instead of near the top:
Note all the white space above the menu on the left. I tried adjusting its position with the top CSS property, but it didn't change anything.
Can anyone point me in the right direction?
Add
vertical-align:top;
to your css *{}
jsFiddle
Add a vertical-align to the #mainNav as follow:
#mainNav {
vertical-align: top;
display: inline-block;
width: 20%;
}