CSS display attribute parameters

Question

i have a container box that includes a number of thumbnails. i earlier made a div out of all the thumbs, but that wasnt efficient. i am now including all the diff thumbs in tags and have included them in the same class.

in the class attributes i have:

.thumb-wrap {
    float: left;
    display: block;
    margin: 5px;
}

.thumb {
    padding: 4px;
}
.thumb-img {
    width: 100px;
    height: 75px;
    border: 1px solid #999;
    padding: 5px;
    background-image:url(slide-bg.jpg);
}

the html is:

 <div class="thumb-wrap">
  <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
  <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
  <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
  <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
  <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
  <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
  <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
  <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>

  </div>

however the thumbs are appearing centered in the box. i dont want that. i want them to be left aligned. please help.

Answer 1

sorry guys. it was stupid. i had text-align: center; in the body.

Answer 2

You also don't need the class "thumb" on the link or "thumb-img" on the images if you wrap them in the div "thumb-wrap."

Just use the parent relationship:

.thumb-wrap {
    float: left;
    display: block;
    margin: 5px;

}

 .thumb-wrap a {
    padding: 4px;

}

 .thumb-wrap img {
    width: 100px;
    height: 75px;
    border: 1px solid #999;
    padding: 5px;
    background-image:url(slide-bg.jpg);

}

That will keep your HTML cleaner.

Answer 3

Instead of using a div to contain your thumbs it is far more semantic to use a list:

<ul class="thumbs">
   <li><a href="#"><img src="img0-thumb0.jpg" /></a>
   <li><a href="#"><img src="img1-thumb1.jpg" /></a>
   <li><a href="#"><img src="img2-thumb2.jpg" /></a>
   <li><a href="#"><img src="img3-thumb3.jpg" /></a>
</ul>

Then you don't need classes on every anchor and every image in the list because you can target them like this:

ul.thumbs li a {
   /* anchor styles here */
}
ul.thumbs li a img {
   /* image styles here */
}