Tell us what’s happening:
I am trying to place the navigation bar on the left of my page using the nav element with float property and sticky position in CSS.
I’ve set the height of my navigation bar using min/max-height: 110svh, but this means that only the content that fits into the initial view of the screen is wrapping around the floating element. Once I scroll down the page, the content appears beneath it. How can I make all content wrap around it?
Your code so far
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Technical Documentation Page</title>
</head>
<body>
<nav id="navbar">
<header>Navigation</header>
<ul>
<li><a class="nav-link" href="#Name_of_Section1">Name of Section1</a></li>
<li><a class="nav-link" href="#Name_of_Section2">Name of Section2</a></li>
<li><a class="nav-link" href="#Name_of_Section3">Name of Section3</a></li>
<li><a class="nav-link" href="#Name_of_Section4">Name of Section4</a></li>
<li><a class="nav-link" href="#Name_of_Section5">Name of Section5</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Name_of_Section1">
<header>Name of Section1</header>
<p>Lorem ipsum dolor sit amet. Ex modi velit non consectetur esse eos porro porro et dolorum modi sit dicta nobis sit velit neque. Ut quia rerum ea amet aspernatur aut dolorem dicta et deleniti numquam eos dolores quia qui voluptatem omnis. Vel beatae blanditiis ex nesciunt cupiditate id adipisci reiciendis et rerum quis aut quisquam totam! Qui ullam perspiciatis ut impedit aspernatur et incidunt voluptatem vel adipisci voluptatibus. Non minus voluptate ea labore sint rem deleniti quidem cum quas eius ut dolorem similique. Vel atque quasi sed exercitationem quia et minima itaque id fugiat possimus. Non iste commodi ut ipsam saepe aut quaerat ipsa aut recusandae cupiditate. Vel numquam sint et consequatur odit qui temporibus rerum aut fuga tempora! Et quam quibusdam et aliquam explicabo a perferendis fugiat non quia illum et quam odit aut odio laudantium. Ea aspernatur praesentium et aperiam saepe cum consequuntur soluta. Non autem labore aut quos omnis aut natus quibusdam aut provident cumque ut officiis voluptas sed voluptatem dignissimos. Sit fugit voluptatum qui tempora repudiandae sit nulla nostrum At neque sunt sit impedit nihil. Non possimus quasi qui aperiam vitae est repellat unde. Eum nulla ipsa aut obcaecati minus eum omnis autem aut delectus culpa sit eligendi alias et odit quasi. </p>
<p>Est quia praesentium ea totam officiis eum voluptates doloribus quo rerum possimus est quia porro sed aliquid deleniti quo consequatur quae. Sit optio sequi eos perferendis sunt et error optio est eius eligendi in odit maxime! Sit quasi inventore est quasi accusantium ut internos distinctio aut aliquam fuga! A animi dolorum id dolorem doloribus qui voluptas quis est cupiditate mollitia. Id mollitia enim est tenetur officia rem assumenda perferendis? Vel voluptatem cumque cum incidunt unde et expedita esse et debitis voluptas est placeat esse. In similique consequatur ut veritatis eligendi non inventore rerum et voluptas itaque. Est nesciunt ipsa aut incidunt voluptas sit expedita omnis. </p>
<p>Vel eius voluptatibus sit necessitatibus quibusdam 33 sint aliquam est voluptas sunt id fugiat dolores. Sed consequuntur sapiente et omnis quos ab Quis itaque id expedita asperiores in voluptates nesciunt et omnis eius. Id dolor dolorem hic totam minima qui rerum quia eos pariatur dolorem eos quos repellendus eos laudantium vitae? Ut aspernatur blanditiis non nostrum laboriosam et repudiandae maxime. Cum impedit distinctio est molestiae expedita qui voluptas provident id dignissimos fugit? Et minus facere aut molestiae ipsa est expedita voluptas hic consectetur magnam ad possimus ratione hic exercitationem cupiditate et omnis dicta. Et iste dolore non rerum animi est dolores assumenda ut quibusdam tenetur non saepe labore sit voluptatum maiores? Et quia laboriosam qui explicabo officiis aut praesentium dolore. Sit nihil autem et magni quas et dolore possimus sed voluptas maiores non galisum autem non deserunt aspernatur aut eius omnis. Eos iusto harum eos accusamus voluptatem ut accusamus omnis. Vel odit facilis aut totam enim non accusamus mollitia qui expedita voluptatibus. </p>
</p>
//--REMEMBER to add a code element--//
</section>
<section class="main-section" id="Name_of_Section2">
<header>Name of Section2</header>
<p>Lorem ipsum dolor sit amet. Ex modi velit non consectetur esse eos porro porro et dolorum modi sit dicta nobis sit velit neque. Ut quia rerum ea amet aspernatur aut dolorem dicta et deleniti numquam eos dolores quia qui voluptatem omnis. Vel beatae blanditiis ex nesciunt cupiditate id adipisci reiciendis et rerum quis aut quisquam totam! Qui ullam perspiciatis ut impedit aspernatur et incidunt voluptatem vel adipisci voluptatibus. Non minus voluptate ea labore sint rem deleniti quidem cum quas eius ut dolorem similique. Vel atque quasi sed exercitationem quia et minima itaque id fugiat possimus. Non iste commodi ut ipsam saepe aut quaerat ipsa aut recusandae cupiditate. Vel numquam sint et consequatur odit qui temporibus rerum aut fuga tempora! Et quam quibusdam et aliquam explicabo a perferendis fugiat non quia illum et quam odit aut odio laudantium. Ea aspernatur praesentium et aperiam saepe cum consequuntur soluta. Non autem labore aut quos omnis aut natus quibusdam aut provident cumque ut officiis voluptas sed voluptatem dignissimos. Sit fugit voluptatum qui tempora repudiandae sit nulla nostrum At neque sunt sit impedit nihil. Non possimus quasi qui aperiam vitae est repellat unde. Eum nulla ipsa aut obcaecati minus eum omnis autem aut delectus culpa sit eligendi alias et odit quasi. </p>
<p>Est quia praesentium ea totam officiis eum voluptates doloribus quo rerum possimus est quia porro sed aliquid deleniti quo consequatur quae. Sit optio sequi eos perferendis sunt et error optio est eius eligendi in odit maxime! Sit quasi inventore est quasi accusantium ut internos distinctio aut aliquam fuga! A animi dolorum id dolorem doloribus qui voluptas quis est cupiditate mollitia. Id mollitia enim est tenetur officia rem assumenda perferendis? Vel voluptatem cumque cum incidunt unde et expedita esse et debitis voluptas est placeat esse. In similique consequatur ut veritatis eligendi non inventore rerum et voluptas itaque. Est nesciunt ipsa aut incidunt voluptas sit expedita omnis. </p>
<p>Vel eius voluptatibus sit necessitatibus quibusdam 33 sint aliquam est voluptas sunt id fugiat dolores. Sed consequuntur sapiente et omnis quos ab Quis itaque id expedita asperiores in voluptates nesciunt et omnis eius. Id dolor dolorem hic totam minima qui rerum quia eos pariatur dolorem eos quos repellendus eos laudantium vitae? Ut aspernatur blanditiis non nostrum laboriosam et repudiandae maxime. Cum impedit distinctio est molestiae expedita qui voluptas provident id dignissimos fugit? Et minus facere aut molestiae ipsa est expedita voluptas hic consectetur magnam ad possimus ratione hic exercitationem cupiditate et omnis dicta. Et iste dolore non rerum animi est dolores assumenda ut quibusdam tenetur non saepe labore sit voluptatum maiores? Et quia laboriosam qui explicabo officiis aut praesentium dolore. Sit nihil autem et magni quas et dolore possimus sed voluptas maiores non galisum autem non deserunt aspernatur aut eius omnis. Eos iusto harum eos accusamus voluptatem ut accusamus omnis. Vel odit facilis aut totam enim non accusamus mollitia qui expedita voluptatibus. </p>
<div>
<img id="pic1" src=""/>
<caption>Picture 1 here</caption>
</div>
<div>
<img id="pic2" src=""/>
<caption>Picture 2 here</caption>
</div>
</section>
<section class="main-section" id="Name_of_Section3">
<header>Name of Section3</header>
<p>Lorem ipsum dolor sit amet. Ex modi velit non consectetur esse eos porro porro et dolorum modi sit dicta nobis sit velit neque. Ut quia rerum ea amet aspernatur aut dolorem dicta et deleniti numquam eos dolores quia qui voluptatem omnis. Vel beatae blanditiis ex nesciunt cupiditate id adipisci reiciendis et rerum quis aut quisquam totam! Qui ullam perspiciatis ut impedit aspernatur et incidunt voluptatem vel adipisci voluptatibus. Non minus voluptate ea labore sint rem deleniti quidem cum quas eius ut dolorem similique. Vel atque quasi sed exercitationem quia et minima itaque id fugiat possimus. Non iste commodi ut ipsam saepe aut quaerat ipsa aut recusandae cupiditate. Vel numquam sint et consequatur odit qui temporibus rerum aut fuga tempora! Et quam quibusdam et aliquam explicabo a perferendis fugiat non quia illum et quam odit aut odio laudantium. Ea aspernatur praesentium et aperiam saepe cum consequuntur soluta. Non autem labore aut quos omnis aut natus quibusdam aut provident cumque ut officiis voluptas sed voluptatem dignissimos. Sit fugit voluptatum qui tempora repudiandae sit nulla nostrum At neque sunt sit impedit nihil. Non possimus quasi qui aperiam vitae est repellat unde. Eum nulla ipsa aut obcaecati minus eum omnis autem aut delectus culpa sit eligendi alias et odit quasi. </p>
<p>Est quia praesentium ea totam officiis eum voluptates doloribus quo rerum possimus est quia porro sed aliquid deleniti quo consequatur quae. Sit optio sequi eos perferendis sunt et error optio est eius eligendi in odit maxime! Sit quasi inventore est quasi accusantium ut internos distinctio aut aliquam fuga! A animi dolorum id dolorem doloribus qui voluptas quis est cupiditate mollitia. Id mollitia enim est tenetur officia rem assumenda perferendis? Vel voluptatem cumque cum incidunt unde et expedita esse et debitis voluptas est placeat esse. In similique consequatur ut veritatis eligendi non inventore rerum et voluptas itaque. Est nesciunt ipsa aut incidunt voluptas sit expedita omnis. </p>
<p>Vel eius voluptatibus sit necessitatibus quibusdam 33 sint aliquam est voluptas sunt id fugiat dolores. Sed consequuntur sapiente et omnis quos ab Quis itaque id expedita asperiores in voluptates nesciunt et omnis eius. Id dolor dolorem hic totam minima qui rerum quia eos pariatur dolorem eos quos repellendus eos laudantium vitae? Ut aspernatur blanditiis non nostrum laboriosam et repudiandae maxime. Cum impedit distinctio est molestiae expedita qui voluptas provident id dignissimos fugit? Et minus facere aut molestiae ipsa est expedita voluptas hic consectetur magnam ad possimus ratione hic exercitationem cupiditate et omnis dicta. Et iste dolore non rerum animi est dolores assumenda ut quibusdam tenetur non saepe labore sit voluptatum maiores? Et quia laboriosam qui explicabo officiis aut praesentium dolore. Sit nihil autem et magni quas et dolore possimus sed voluptas maiores non galisum autem non deserunt aspernatur aut eius omnis. Eos iusto harum eos accusamus voluptatem ut accusamus omnis. Vel odit facilis aut totam enim non accusamus mollitia qui expedita voluptatibus. </p>
<table>//--INSERT TABLE HERE ABOUT INLINE VS BLOCK ELEMENTS</table>
</section>
<section class="main-section" id="Name_of_Section4">
<header>Name of Section4</header>
<p>Lorem ipsum dolor sit amet. Ex modi velit non consectetur esse eos porro porro et dolorum modi sit dicta nobis sit velit neque. Ut quia rerum ea amet aspernatur aut dolorem dicta et deleniti numquam eos dolores quia qui voluptatem omnis. Vel beatae blanditiis ex nesciunt cupiditate id adipisci reiciendis et rerum quis aut quisquam totam! Qui ullam perspiciatis ut impedit aspernatur et incidunt voluptatem vel adipisci voluptatibus. Non minus voluptate ea labore sint rem deleniti quidem cum quas eius ut dolorem similique. Vel atque quasi sed exercitationem quia et minima itaque id fugiat possimus. Non iste commodi ut ipsam saepe aut quaerat ipsa aut recusandae cupiditate. Vel numquam sint et consequatur odit qui temporibus rerum aut fuga tempora! Et quam quibusdam et aliquam explicabo a perferendis fugiat non quia illum et quam odit aut odio laudantium. Ea aspernatur praesentium et aperiam saepe cum consequuntur soluta. Non autem labore aut quos omnis aut natus quibusdam aut provident cumque ut officiis voluptas sed voluptatem dignissimos. Sit fugit voluptatum qui tempora repudiandae sit nulla nostrum At neque sunt sit impedit nihil. Non possimus quasi qui aperiam vitae est repellat unde. Eum nulla ipsa aut obcaecati minus eum omnis autem aut delectus culpa sit eligendi alias et odit quasi. </p>
<p>Est quia praesentium ea totam officiis eum voluptates doloribus quo rerum possimus est quia porro sed aliquid deleniti quo consequatur quae. Sit optio sequi eos perferendis sunt et error optio est eius eligendi in odit maxime! Sit quasi inventore est quasi accusantium ut internos distinctio aut aliquam fuga! A animi dolorum id dolorem doloribus qui voluptas quis est cupiditate mollitia. Id mollitia enim est tenetur officia rem assumenda perferendis? Vel voluptatem cumque cum incidunt unde et expedita esse et debitis voluptas est placeat esse. In similique consequatur ut veritatis eligendi non inventore rerum et voluptas itaque. Est nesciunt ipsa aut incidunt voluptas sit expedita omnis. </p>
<p>Vel eius voluptatibus sit necessitatibus quibusdam 33 sint aliquam est voluptas sunt id fugiat dolores. Sed consequuntur sapiente et omnis quos ab Quis itaque id expedita asperiores in voluptates nesciunt et omnis eius. Id dolor dolorem hic totam minima qui rerum quia eos pariatur dolorem eos quos repellendus eos laudantium vitae? Ut aspernatur blanditiis non nostrum laboriosam et repudiandae maxime. Cum impedit distinctio est molestiae expedita qui voluptas provident id dignissimos fugit? Et minus facere aut molestiae ipsa est expedita voluptas hic consectetur magnam ad possimus ratione hic exercitationem cupiditate et omnis dicta. Et iste dolore non rerum animi est dolores assumenda ut quibusdam tenetur non saepe labore sit voluptatum maiores? Et quia laboriosam qui explicabo officiis aut praesentium dolore. Sit nihil autem et magni quas et dolore possimus sed voluptas maiores non galisum autem non deserunt aspernatur aut eius omnis. Eos iusto harum eos accusamus voluptatem ut accusamus omnis. Vel odit facilis aut totam enim non accusamus mollitia qui expedita voluptatibus. </p>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</section>
<section class="main-section" id="Name_of_Section5">
<header>Name of Section5</header>
<p>Lorem ipsum dolor sit amet. Ex modi velit non consectetur esse eos porro porro et dolorum modi sit dicta nobis sit velit neque. Ut quia rerum ea amet aspernatur aut dolorem dicta et deleniti numquam eos dolores quia qui voluptatem omnis. Vel beatae blanditiis ex nesciunt cupiditate id adipisci reiciendis et rerum quis aut quisquam totam! Qui ullam perspiciatis ut impedit aspernatur et incidunt voluptatem vel adipisci voluptatibus. Non minus voluptate ea labore sint rem deleniti quidem cum quas eius ut dolorem similique. Vel atque quasi sed exercitationem quia et minima itaque id fugiat possimus. Non iste commodi ut ipsam saepe aut quaerat ipsa aut recusandae cupiditate. Vel numquam sint et consequatur odit qui temporibus rerum aut fuga tempora! Et quam quibusdam et aliquam explicabo a perferendis fugiat non quia illum et quam odit aut odio laudantium. Ea aspernatur praesentium et aperiam saepe cum consequuntur soluta. Non autem labore aut quos omnis aut natus quibusdam aut provident cumque ut officiis voluptas sed voluptatem dignissimos. Sit fugit voluptatum qui tempora repudiandae sit nulla nostrum At neque sunt sit impedit nihil. Non possimus quasi qui aperiam vitae est repellat unde. Eum nulla ipsa aut obcaecati minus eum omnis autem aut delectus culpa sit eligendi alias et odit quasi. </p>
<p>Est quia praesentium ea totam officiis eum voluptates doloribus quo rerum possimus est quia porro sed aliquid deleniti quo consequatur quae. Sit optio sequi eos perferendis sunt et error optio est eius eligendi in odit maxime! Sit quasi inventore est quasi accusantium ut internos distinctio aut aliquam fuga! A animi dolorum id dolorem doloribus qui voluptas quis est cupiditate mollitia. Id mollitia enim est tenetur officia rem assumenda perferendis? Vel voluptatem cumque cum incidunt unde et expedita esse et debitis voluptas est placeat esse. In similique consequatur ut veritatis eligendi non inventore rerum et voluptas itaque. Est nesciunt ipsa aut incidunt voluptas sit expedita omnis. </p>
<p>Vel eius voluptatibus sit necessitatibus quibusdam 33 sint aliquam est voluptas sunt id fugiat dolores. Sed consequuntur sapiente et omnis quos ab Quis itaque id expedita asperiores in voluptates nesciunt et omnis eius. Id dolor dolorem hic totam minima qui rerum quia eos pariatur dolorem eos quos repellendus eos laudantium vitae? Ut aspernatur blanditiis non nostrum laboriosam et repudiandae maxime. Cum impedit distinctio est molestiae expedita qui voluptas provident id dignissimos fugit? Et minus facere aut molestiae ipsa est expedita voluptas hic consectetur magnam ad possimus ratione hic exercitationem cupiditate et omnis dicta. Et iste dolore non rerum animi est dolores assumenda ut quibusdam tenetur non saepe labore sit voluptatum maiores? Et quia laboriosam qui explicabo officiis aut praesentium dolore. Sit nihil autem et magni quas et dolore possimus sed voluptas maiores non galisum autem non deserunt aspernatur aut eius omnis. Eos iusto harum eos accusamus voluptatem ut accusamus omnis. Vel odit facilis aut totam enim non accusamus mollitia qui expedita voluptatibus.</p>
//--REMEMBER to add a code element--//
</section>
</main>
<footer>
Created as part of the freeCodeCamp Responsive Web Design Course.
</footer>
</body>
</html>
html {
box-sizing: border-box;
}
* {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav {
float: left;
position: sticky;
top: 0;
display:grid;
padding-right: 10px;
margin-right:20px;
background-color: #801A86;
border: 2px solid #645986;
min-height:100svh;
max-width:22%;
min-width:50px;
overflow:hidden;
}
#navbar > header {
color: white;
font-size: 20px;
font-weight: bold;
border: 1px solid #8FE320;
height: 40px;
}
#navbar > li, a {
text-align: top;
color:white;
text-decoration: none;
border: 1px solid #8FE388;
}
#navbar > ul {
position: inline;
top: 10px;
display: grid;
border: 1px solid red;
list-style-type: none;
}
section > header {
font-size: 30px;
font-weight: bold;
padding: 10;
}
body {
background-color: #4E0250;
color: white;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page