League Tiles

by hunter

HTML

<ul class="league-list clear-fix">
<li>
    <div class="league">
        <header>NAME</header>
        <nav>
            <ul class="clear-fix">
                <li><a href="">LINK</a></li>
                <li><a href="">LINK</a></li>
                <li><a href="">LINK</a></li>
            </ul>
        </nav>            
        <footer>
            <a href="">ACTION</a>            
        </footer>
    </div>
</li>
<li>
    <div class="league">
        <header>NAME</header>
        <nav>
            <ul class="clear-fix">
                <li><a href="">LINK</a></li>
                <li><a href="">LINK</a></li>
                <li><a href="">LINK</a></li>
            </ul>
        </nav>            
        <footer>
            <a href="">ACTION</a>            
        </footer>
    </div>
</li>
<li>
    <div class="league">
        <header>NAME</header>               
        <footer>
            <a href="">ACTION</a>            
        </footer>
    </div>
</li>
</ul>

CSS

body
{
    padding: 10px;
    font-family: helvetica, arial;
    font-size: 10pt;
    min-width: 700px;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.league-list
{
    padding: 10px 0;
    list-style-type: none;
}

.league-list > li
{
    float: left;    
    width: 33%;
}
.league-list .league
{
    border: solid 1px #999;
    min-height: 80px;
    min-width: 200px;
    max-width: 250px;
    background: #ddd url("http://placehold.it/350x100") no-repeat top center;
    padding-top: 100px;
    margin: 0 5px;
}

.league-list .league > *
{
    padding: 5px;
}

.league-list .league nav ul
{
    list-style-type: none;
}

.league-list .league nav li
{
float: left;
}

.league-list .league nav a
{
    font-size: .8em;
    padding-right: 4px;
}

.league-list .league footer
{
}