Technical Documentation Page - Using 'float' to style the navigation bar

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

1 Like

Hello,
This is going to be a long explanation so I apologize in advance,
The reason this unexpected behavior occurs is because of the usage of the float, the manual setting of the widths & heights (which is something you shoulf try to avoid at all costs) & the structure of HTML especially the nav bar layout

  • You should be using CSS flexbox instead of floats because the float property takes the element out of the normal flow of the document so it is like saying to the browser to completely ignore this element & act like it does not exist, that is why the other content appeared underneath it, because for them that element does not exist or more accurately it should not share any space in the document with the other elements.
    I suggest you make the body element a flexbox but make sure to add the footer inside the main element to get the proper alignment

  • The position sticky is not working because its parent element is not the height of the content, you can scroll because the height of the content in the main element is too long but the height of navbar is hard coded to be always the height of the screen min-height:100svh; & you cannot just set the height of nav to 100% of its parent because that will break the layout, one solution is to wrap the nav element in a div with the class container & add a min-height of 100% to it

I hope that this is not super confusing or overwhelming but anyway, here is a codpen with the code working properly :
(https://codepen.io/constantcode9909/pen/YzMaKLE?editors=0100)
(The preview tool on FreeCodeCamp site will not display it properly although the code is correct)
you can see what I had to change in HTML & CSS code to make it work but at the end please try to avoid setting explicit heights unless you really have to , let the content determine the height of its container.
position: inline is invalid CSS as there is no such thing aa an inline value for the position property.

Again sorry for th long answer & let me know if you have any questions

1 Like