title: how to create a multi column list with css?
body: <p>I want to create a fixed layout that displays some images. for example, a "table" of 3 images in a row and 3 images in a column.
  Also i need that every li conatins some fixed width and height and the image centered and alignet to top.</p>
  
  <p>So i've thinked in something like this:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;img /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;img /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;img /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But i don't know css, still i've created some like this but still doesn't work...</p>
  
  <pre><code>ul {display: block; text-align: center; border:#666666 solid 1px; height: 150px; padding:0; margin:0;}
  li { list-style:none; float:left; width: 150px; height: 150px; margin-bottom: 32px;}
  </code></pre>
  
  <hr>
  
  <p>Fixed version:</p>
  
  <pre><code>ul{ height: 180px; text-align:center;padding:0;}
  li{list-style:none;padding:0;width: 25%;height: 180px;float: left; display:inline-block;}
  </code></pre>
  
  <p>Note: Only works for only one <code>&lt;ul&gt;</code> with many <code>&lt;li&gt;</code>, the columns are setted changing the width of the <code>&lt;li&gt;</code>. 25% means 4 columns, 33% = 3 columns, etc. Formula: 100/(desired columns).</p>