title: Permanent 2x3 CSS image gallery
body: <p>I have very basic image gallery how can I fixed it to be 3 columns by 2 rows</p>
  
  <p>This is the HTML code </p>
  
  <pre><code>&lt;div id="gallery"&gt;
          &lt;div class="img"&gt;
              &lt;a target="_blank" href="klematis_big.htm"&gt; &lt;img src="../zeela/img/image_1.png" alt="Klematis"/&gt; &lt;/a&gt;
              &lt;div class="descHead"&gt;
                  כותרת
              &lt;/div&gt;
              &lt;div class="desc"&gt;
                  Add a description of the image here
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="img"&gt;
              &lt;a target="_blank" href="klematis2_big.htm"&gt; &lt;img src="../zeela/img/image_1.png" alt="Klematis" /&gt; &lt;/a&gt;
              &lt;div class="descHead"&gt;
                  כותרת
              &lt;/div&gt;
              &lt;div class="desc"&gt;
                  Add a description of the image here
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="img"&gt;
              &lt;a target="_blank" href="klematis3_big.htm"&gt; &lt;img src="../zeela/img/image_1.png" alt="Klematis" /&gt; &lt;/a&gt;
              &lt;div class="descHead"&gt;
                  כותרת
              &lt;/div&gt;
              &lt;div class="desc"&gt;
                  Add a description of the image here
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="img"&gt;
              &lt;a target="_blank" href="klematis4_big.htm"&gt; &lt;img src="../zeela/img/image_1.png" alt="Klematis" /&gt; &lt;/a&gt;
              &lt;div class="descHead"&gt;
                  כותרת
              &lt;/div&gt;
  
              &lt;div class="desc"&gt;
                  Add a description of the image here
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="img"&gt;
              &lt;a target="_blank" href="klematis4_big.htm"&gt; &lt;img src="../zeela/img/image_1.png" alt="Klematis"  /&gt; &lt;/a&gt;
              &lt;div class="descHead"&gt;
                  כותרת
              &lt;/div&gt;
              &lt;div class="desc"&gt;
                  Add a description of the image here
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="img"&gt;
              &lt;a target="_blank" href="klematis4_big.htm"&gt; &lt;img src="../zeela/img/image_1.png" alt="Klematis" /&gt; &lt;/a&gt;
              &lt;div class="descHead"&gt;
                  כותרת
              &lt;/div&gt;
              &lt;div class="desc"&gt;
                  Add a description of the image here
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>and this is the CSS code </p>
  
  <pre>
  #gallery{
  
  }
  div.img {
      margin: 2px;
      height: auto;
      width: auto;
      float: right;
  }
  div.img img {
      width: 200px; /* what is the img size*/
      height: 200px;
      display: inline;
      margin-left: 30px;
      margin-right: 30px;
      margin-bottom: 20px;
      border: 1px solid #ffffff;
  }
  
  /*
   div.img a:hover img {
   border: 1px solid #0000ff;
   }*/
  div.desc {
      text-align: center;
      font-weight: normal;
      width: 120px;
      margin: 30px;
  }
  .descHead {
      margin-right: 30px;
      margin-top: 20px;
      margin-bottom: 15px;
      font-family: Tahoma;
      font-size: 24px;
      color: #323232;
  }
  
  .desc {
      margin-right: 30px !important;
      margin-bottom: 40px !important;
      font-family: Tahoma;
      font-size: 14px;
      color: #323232;
  }
  </pre>