title: bootstrap navbar 2 divs one below another
body: <p>I have the below code and I want the div1 to be above div2. I have tried to do it with css as seen below but I can't get it right and the divs appear next to each other.
  Since i have both of them to be full <code>width:100%;</code> and <code>float:right;</code> shouldn't they be below each other?</p>
  
  <p>Also, I read about <code>clear:both;</code> that it should do the trick but it did not!</p>
  
  <p>Any thoughts on this?</p>
  
  <p>Thank you</p>
  
  <p><strong>EDIT:</strong>
  I am using Bootstrap 4.0.0.</p>
  
  <pre><code>&lt;body&gt;
      &lt;header&gt;
          &lt;div class="container"&gt;
              &lt;nav class="navbar navbar-expand-lg navbar-light top"&gt;
                  &lt;img src="images.png" alt="image" class="imageClass"&gt;
                  &lt;div class="div1 "&gt;
                      &lt;a href="#" id="id1"&gt;somthinghere&lt;/a&gt;
                      &lt;a href="#" class="active"&gt;link&lt;/a&gt;
                      &lt;a href="#" class=""&gt;link2&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="collapse navbar-collapse div2" id="navbarsExampleDefault"&gt;
                      &lt;ul class="navbar-nav ml-lg"&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#"&gt;link1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#"&gt;link11&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#"&gt;link111&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#"&gt;link1111&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;                       
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>header{
      position:absolute;
      z-index: 10;
      width: 100%;
  }
  
  .div2{
      clear:both;
      width: 100%;
      float:right;        
  }
  
  .div1{
      width: 100%; 
      float:right;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/eRiIA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eRiIA.png" alt="Image"></a></p>