title: Positioning cell elements in css grid layout
body: <p>I am trying to use the <code>display:table</code> css option to create a page divided in cell-like blocks.</p>
  <p>However, I would like the content in every cell to be independent from the content in the other cells, i.e. not to be positioned in relation to the elements inside the other cells. Here when I put an image in my first cell, the content in the other one is aligned with the image and it does not reach the top of the page.</p>
  <p>Does someone please have a tip to make it right ? (i.e. position the content of the right-hand side cell at the top of the page ?)</p>
  <p>I tried to play with the <code>display</code>, <code>float</code> and <code>clear</code> options, but I couldn't make it work. I use a <code>table-row</code> container inside a css table, in which I create two cells. I also tried to use columns instead of a row, but I need the row structure to have cells of the same length. Here is my code:</p>
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html lang=&quot;en-US&quot;&gt;
  
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;/head&gt;
   
    &lt;body style=&quot;color:black&quot;&gt;
   
      &lt;div style=&quot;display:table&quot;&gt;
          
          &lt;div style=&quot;display:table-row&quot;&gt;
          
              &lt;div style=&quot;display:table-cell&quot;&gt;
                  &lt;img src=&quot;./frog.jpg&quot; width=&quot;180&quot;&gt;
                  &lt;p&gt;My image&lt;/p&gt;
              &lt;/div&gt;
          
              &lt;div style=&quot;display:table-cell;float:left&quot;&gt;
                  &lt;p&gt;Interneciva Claudius pristinae antehac admodum subversa potens interneciva coloniam Caesar quam oppida praeter 
                  nimium ut regis exornant civitates et interneciva deduxit vestigia Isaura oppida pristinae pristinae subversa 
                  antehac Caesar Isaura Caesar coloniam regis Caesar Claudius regis nimium&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And here is the output:</p>
  <p><a href="https://i.stack.imgur.com/L7KKX.png" rel="nofollow noreferrer">cell-display-css-output</a></p>