Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is caused by the style</p> <pre><code>.post { position: absolute; top: 590px; font-family: Georgia, "Times New Roman", Serif; } </code></pre> <p>Absolute positioning take the block out of the flow so it's parents do not count it as a child for rendering. Changing this to position:relative will fix the problem in your question.</p> <p>To go a little further, try your best not to use pixel positioning (top:590px;) you should be able to get the look you are after with just using the normal flow to position. This make your layout far more resilient to change. </p> <p>Also your structure looks quite strange. I see</p> <pre><code>&lt;div class="container"&gt; &lt;div class="content"&gt; &lt;div class="post"&gt; &lt;div class="post-title"&gt;&lt;/div&gt; &lt;div class="post-author"&gt;&lt;/div&gt; &lt;div class="post-excerp"&gt;&lt;/div&gt; &lt;div class="post-title"&gt;&lt;/div&gt; &lt;div class="post-author"&gt;&lt;/div&gt; &lt;div class="post-excerp"&gt;&lt;/div&gt; &lt;div class="post-title"&gt;&lt;/div&gt; &lt;div class="post-author"&gt;&lt;/div&gt; &lt;div class="post-excerp"&gt;&lt;/div&gt; </code></pre> <p>I would of expected </p> <pre><code>&lt;div class="container"&gt; &lt;div class="content"&gt; &lt;div class="post"&gt; &lt;div class="post-title"&gt;&lt;/div&gt; &lt;div class="post-author"&gt;&lt;/div&gt; &lt;div class="post-excerp"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="post"&gt; &lt;div class="post-title"&gt;&lt;/div&gt; &lt;div class="post-author"&gt;&lt;/div&gt; &lt;div class="post-excerp"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="post"&gt; &lt;div class="post-title"&gt;&lt;/div&gt; &lt;div class="post-author"&gt;&lt;/div&gt; &lt;div class="post-excerp"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>or even </p> <pre><code>&lt;div class="container"&gt; &lt;div class="content"&gt; &lt;article class="post"&gt; &lt;div class="post-title"&gt;&lt;/div&gt; &lt;div class="post-author"&gt;&lt;/div&gt; &lt;div class="post-excerp"&gt;&lt;/div&gt; &lt;/article&gt; &lt;article class="post"&gt; &lt;div class="post-title"&gt;&lt;/div&gt; &lt;div class="post-author"&gt;&lt;/div&gt; &lt;div class="post-excerp"&gt;&lt;/div&gt; &lt;/article&gt; &lt;article class="post"&gt; &lt;div class="post-title"&gt;&lt;/div&gt; &lt;div class="post-author"&gt;&lt;/div&gt; &lt;div class="post-excerp"&gt;&lt;/div&gt; &lt;/article&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload