Michigan Publishing Branded Footer

Example HTML and CSS for the footer of a partner's hosted web page. In this example, they are publishing a book with the Digital Rhetoric Collaborative which is under the Michigan Publishing imprint.

by Jonathan McGlone

HTML

<div class="footer">
    
    <div class="col drc"> 
        <a href="http://digitalrhetoriccollaborative.org" title="Digital Rhetoric Collaborative"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/drc-footer.png" alt="Digital Rhetoric Collaborative"/></a>
    </div>
    
    <div class="col text">
    <p>Product of <a href="http://www.publishing.umich.edu">Michigan Publishing</a>, <a href="http://www.lib.umich.edu/">University of Michigan Library</a>  <span class="bull">&#8226;</span>  <a href="mailto:[email protected]">[email protected]</a>  <span class="bull">&#8226;</span> ISBN 978-0-472-XXXXX-X</p>
    </div>
        
    <div class="col mpub"> 
        <a href="http://www.publishing.umich.edu" title="Michigan Publishing"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/mpub-footer.png" alt="Michigan Publishing"/></a>
    </div>
    
</div>

CSS

.footer {
    height: 75px;
    text-align: center;
    padding: 15px;
    line-height: 1.5em;
    width: 960px;
    z-index: 1;
    font-size: 13px;
}

.footer .col {
    position: relative;
    float: left;
    margin-right: 20px;
}

.footer .drc {
    width: 113px;
}

.footer .mpub {
    width: 64px;
    margin-right: 0px;
}

.footer .text {
    width: auto;
}

.footer p {
    padding-top: 7px;
    margin-bottom: 10px;
}
.footer .bull {
    margin: 0 1em;
    color: #BBB;
}