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

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.