how to move a div under a floated div

Question

I have looked into many different answers and found nothing. On this. Perhaps my code is just too weird, but I cannot move my main code under my Navigation Bar. Can someone please help me? Thanks in advance!

My code:

<div id="navBarWrapper">
    <nav class="navBar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="HTML/aboutme.html">About Me</a></li>
        <li><a href="HTML/codeblog.html">Code Blog</a></li>
        <li><a href="HTML/contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
 <content>
   <div id="mainContentWrapper">
     <main class="mainContent">
       Hi, This page is currently incomplete!
    </main>
  </div>
  </content>

index.html CSS:

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



.pageHeader div {
 width: 100vw
}



.pageHeader h1 {
  font-family: 'PT Sans', sans-serif;
}
`

The `content` tag is deprecated. My is `main` inside a `div` which is inside of `content`? — lurker, Jul 05 '20 at 23:33

score 2 · Accepted Answer · edited Jul 05 '20 at 23:41

Firstly, the <content> element is obsolete so you should use <div> or some other suitable element.

To make a div appear under a floated div, you need to use "clear", e.g.

div#mainContentWrapper { clear:both;}

See it in action in a snippet: Without clear (your code)

#navBarWrapper {
  float: left;
}

<div id="navBarWrapper">
  <nav class="navBar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="HTML/aboutme.html">About Me</a></li>
      <li><a href="HTML/codeblog.html">Code Blog</a></li>
      <li><a href="HTML/contact.html">Contact</a></li>
    </ul>
  </nav>
</div>
<div class="content">
  <div id="mainContentWrapper">
    <main class="mainContent">
      Hi, This page is currently incomplete!
    </main>
  </div>
</div>

With clear:

#navBarWrapper {
  float: left;
}

#mainContentWrapper {
  clear: both;
}

<div id="navBarWrapper">
  <nav class="navBar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="HTML/aboutme.html">About Me</a></li>
      <li><a href="HTML/codeblog.html">Code Blog</a></li>
      <li><a href="HTML/contact.html">Contact</a></li>
    </ul>
  </nav>
</div>
<div class="content">
  <div id="mainContentWrapper">
    <main class="mainContent">
      Hi, This page is currently incomplete!
    </main>
  </div>
</div>

The `clear` property prevents an element from wrapping next to or around a floated element. It's a key piece of working with CSS floats. [Here's some good reading](https://css-tricks.com/all-about-floats/) on the subject. — simmer, Jul 05 '20 at 23:41
@Michael "*can you please tell me why the { clear:both;} worked*" Floated elements will keep lining up beside one another horizontally until they can't fit in the available space anymore. `clear:both` acts exactly like it sounds it would - it clears (as in: it moves away from) any floated divs to the left and right and puts it in a new line. — FluffyKitten, Jul 05 '20 at 23:44

how to move a div under a floated div

1 Answers1