Databases
StackOverflow2013
Postsdbo
PODiv matrix structure using css
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODiv matrix structure using css
    text
    copied!<p>I am this html for my products display page in e-commerce site, but some issues with alignment.... In this page will come near by 100 product so i need to show it like matrix </p> <pre><code>&lt;div style=" margin: 0 auto; width:640px; text-align: left"&gt; &lt;div class="leftcol" &gt;left column 1 &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;/div&gt; &lt;div class="leftcol" &gt;right column &lt;p&gt;my textmy text my text my text&lt;/p&gt; &lt;/div&gt; &lt;div class="leftcol" &gt;left column &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;/div&gt; &lt;div class="leftcol" &gt;right column &lt;p&gt;my textmy text my text my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;/div&gt; &lt;div class="leftcol" &gt; left column 2 &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;p&gt;my text&lt;/p&gt; &lt;/div&gt; </code></pre> <p></p> <p>My css</p> <pre><code>.leftcol{width: 200px;background:yellow;margin-right:10px;float:left; } </code></pre> <p>all product divs are in same size that <code>200px</code>, but the height of the div will change as like example, i need to show divs <a href="http://pinterest.com/" rel="nofollow noreferrer">like this</a> <a href="http://pinterest.com/" rel="nofollow noreferrer">http://pinterest.com/</a></p> <p>Display comes like this</p> <p><img src="https://i.stack.imgur.com/7tfFb.png" alt="enter image description here"></p> <p><a href="http://pinterest.com/" rel="nofollow noreferrer">but i need to fill that gaps by next divs example see this site [http://pinterest.com/][1] http://pinterest.com/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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