Three column with images and text centered within divs

This also allows divs to wrap to the next line.

by Jordan Dayton

HTML

<div id="wrapper">

<div id="floating-box">
    <div>
        <div id="circle">
            <img class="images" src="https://community.canvaslms.com/resources/statics/131088/Airport-48.png?a=1474046908108" />
        </div>
    </div>
    <div class="links">
        <h1>Travel & Expense</h1>
            <p><a href="https://community.canvaslms.com/docs/DOC-7980"><img style="margin: 0px 6px -2px 0px;" src="/resources/statics/131088/jive%2Bdoc%2Bicon.png">Travel Expense Checklist for New Hires</a></p>
            <p><a href="ENTER_FULL_DOC_URL_HERE" target="_top"><img style="margin: 0px 6px -3px 0px;" src="/resources/statics/131088/jive%2Bdoc%2Bicon.png">ENTER_DOCUMENT_NAME_HERE</a></p>
            <p><a href="ENTER_FULL_DOC_URL_HERE" target="_top"><img style="margin: 0px 6px -3px 0px;" src="/resources/statics/131088/jive%2Bdoc%2Bicon.png">ENTER_DOCUMENT_NAME_HERE</a></p>
            <p><a href="ENTER_FULL_DOC_URL_HERE" target="_top"><img style="margin: 0px 6px -3px 0px;" src="/resources/statics/131088/jive%2Bdoc%2Bicon.png">ENTER_DOCUMENT_NAME_HERE</a></p>
            <p><a href="ENTER_FULL_DOC_URL_HERE" target="_top"><img style="margin: 0px 6px -3px 0px;" src="/resources/statics/131088/jive%2Bdoc%2Bicon.png">ENTER_DOCUMENT_NAME_HERE</a></p>
    </div>
</div>

<div id="floating-box">
    <div>
        <div id="circle">
            <img class="images" src="https://community.canvaslms.com/resources/statics/131088/Bank%2BCard%2BFront%2BSide%2BFilled-50.png?a=1474046911863" />
        </div>
    </div>
    <div class="links">
        <h1>Credit Card</h1>
            <p><a href="ENTER_FULL_DOC_URL_HERE" target="_top"><img style="margin: 0px 6px -3px 0px;" src="/resources/statics/131088/jive%2Bdoc%2Bicon.png">ENTER_DOCUMENT_NAME_HERE</a></p>
            <p><a href="ENTER_FULL_DOC_URL_HERE" target="_top"><img style="margin: 0px 6px -3px 0px;" src="/resources/statics/131088/jive%2Bdoc%2Bicon.png">ENTER_DOCUMENT_NAME_HERE</a></p>
            <p><a...

CSS

body {
        color: #5e5e5e;
        font: 13px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }

h1 { 
    display: block;
    font-size: 1.5em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    font-weight: bold;
}

p { 
    display: block;
    font-size: 1.1em;
    text-align: left;
    font-weight: normal;
    color: #58585B;
    line-height: 25px;
}

#wrapper {
    text-align: center;
    margin-top: 0;
}

#floating-box {
    display: inline-block;
    width: 330px;
    height: 400px;
    padding: 15px;
    vertical-align: top;
}

#circle {
	width: 100px;
	height: 100px;
	background: #A7A9AB;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  margin: 0 auto;
  position: relative;
}

.images {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.links {
    width: 90%;
}

a:link {
    color: #0080CC;
    text-decoration: none;
}
a:hover {
    color: #58585B;
    text-decoration: underline;
}