Aligning My Images Consistently

HTML & CSS
1

Hi,

i am currently building a photo gallery for myself which is in my local host so not on the web yet. Right now i’m having trouble trying to keep my images looking consistent in terms of the way it is positioned. When i click on the ‘Home’ link it displays all my pictures nicely, all aligned correctly to how i want it given the the image shak link: http://img197.imageshack.us/img197/7312/homeviewlinkok.jpg, even when i click on my second link, ‘Shanghai Zoo’, http://img101.imageshack.us/img101/8118/shanghaizoolinkok.jpg, it seems fine.

However, when i click on my last link, ‘Cheng Huang Temple’ it does not look very consistent compared to the others, especially to my home link as shown here, http://img101.imageshack.us/img101/2575/chenghuangtemplelinknot.jpg. The current version of IE i have is version 7, but i am also using FF and Safari and the problem looks the same on all 3 versions of browsers.


.imageswrapper
{
    margin: 0;
    padding: 0;
    border: 1px solid #330066;
    margin-left:auto;
    margin-right:auto;
    clear: both;
    /** height: 1200px; **/
    /** width: 900px; **/
    overflow: hidden;
    text-align: center;
    float: left;
}


.thumb
{
    
    float: left;
    width: 150px;  /** needed so that the thumb img stays the same **/
    padding: 10px 15px;  /** top/bottom value is 10px and right and left is 15px*/
    margin: auto;
    text-align:center;
    overflow:hidden;
    background:#ffffcc;
    margin:3px;
    border:1px solid red;
    
    
    /** margin: 3px; **/
    /** margin-left:auto;
    margin-right:auto;    **/
     
    /** display:-moz-inline-box;  //FF2 & under 
    display: inline-block;
    margin-top:20px;
    margin-bottom:20px;
    margin-right:20px;
    margin-left:20px;
    border: 1px solid #ff8000;
    padding: 0px;
    height: auto; 
    text-align: center;
    float: left;    
    **/
    
}

.thumb img
{
   display: inline;
    margin: 5px;
    border: 1px solid red;
    padding: 0px;
 
}

.thumbdesc
{
    text-align: center;
     border: 1px solid black;
     padding: 5px;
}

I know that it has to do something with my padding and margins, but as you can see from my commented css code, i just can’t seem to get it near to consistent on my last link. I’ve been playing around this for a bit but it just isn’t giving what i want. If anybody can assist or help, that would be greatful.

2

Have a look at this article, as it’s very relevant to what you are trying to do, but the look of it:

http://gtwebdev.com/workshop/layout/inline-block-gallery.php

3

Setting a height on each of those blocks is the simplest way to get those to line up. You will just need to ensure the titles aren’t excessively long or use overflow to add a scroll bar if necessary.


#gallery li {
  float: left;
  height: 300px;
  width: 200px;
  overflow: auto;
}

Is one way to do it - Not fool proof but may be what you are wanting.

Or a combination of inline-block and min-height as discussed above.