Treehouse Logic Demo

by ritcheyer

HTML

<div id="someReallySpecificIdSoEverythingIsNicelyNamespaced">
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="thlImage">
        <img src="http://placehold.it/100x100" alt="" />
        <p>Lorem...

CSS

#someReallySpecificIdSoEverythingIsNicelyNamespaced {
    width: 600px;
    border: 1px solid #333;
    overflow: hidden;
}
#someReallySpecificIdSoEverythingIsNicelyNamespaced div {
    float: left;
    margin: 0 10px;
    text-align: center;
}