title: Why is my floating container going under my div rather than starting on a new line
body: <p>My <code>page-button-container</code> is not start on a new like even though i am using <code>display: block</code>. it is going under my <code>test-pics-container</code>. Why is this and how can I fix it? I figured out that if I reload <code>float: right</code> from my <code>page-button-container</code> it works (but then its not floating to the right.</p>
  
  <p>I want it to look something like this: </p>
  
  <p><a href="https://i.stack.imgur.com/Llp4t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Llp4t.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test-lookup-container {
    position: relative;
    display: block;
    width: 1000px;
    height: auto;
    margin: 0 auto 0 auto;
    padding: 20px 26px;
    box-sizing: border-box;
    background-color: purple;
  }
  
  .page-buttons-container {
    position: relative;
    display: block;
    width: 400px;
    height: 70px;
    margin: 0;
    padding: 0;
    float: right;
    background-color: orange;
  }
  
  .test-pics-container {
    position: relative;
    display: block;
    width: 900px;
    height: auto;
    margin: 0 auto 0 auto;
    padding: 0 26px;
    box-sizing: border-box;
    background-color: red;
  }
  
  .test-item {
    position: relative;
    display: inline-block;
    width: 250px;
    height: 700px;
    margin: 0;
    padding: 0;
    background-color: #ececec;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test-lookup-container"&gt;
    &lt;div class="page-buttons-container"&gt;
      ssssssssssssssss
    &lt;/div&gt;
    &lt;div class="test-pics-container"&gt;
      &lt;div class="test-item"&gt;
        &lt;img alt="" src="test.png"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>