3 column div blocks that wrap

by Jordan Dayton

HTML

<!-- TRY TO KEEP DESCRIPTIONS TO ~34 CHARACTERS OR LESS -->
<div id="wrapper">

<div id="floating-box">
    <div>
        <div id="circle">
            <img class="images" src="https://community.bridgeapp.com/resources/statics/2089/peer_networking.png?a=1475860240257" />
        </div>
    </div>
    <div class="links">
        <h1>Peer Networking & Support</h1>
        <h2 id="inner2">You are the end users of Webhooks; making you the experts!  This is your space to support one another and explore Webhooks together! </h2>
        <!-- ADD LINKS HERE --------------------------
            <p><a href="https://community.canvaslms.com/docs/DOC-7980" target="_top"><img style="margin: 0px 6px -2px 0px;" src="https://community.bridgeapp.com/resources/statics/2046/jive_doc_icon.png?a=1475872302598">New Hire Travel/Expense Checklist</a></p>
            <p><a href="https://community.canvaslms.com/docs/DOC-8098" target="_top"><img style="margin: 0px 6px -3px 0px;" src="https://community.bridgeapp.com/resources/statics/2046/jive_doc_icon.png?a=1475872302598">TL;DR Travel Policy (AKA FAQ)</a></p>
            <p><a href="https://community.canvaslms.com/docs/DOC-7937" target="_top"><img style="margin: 0px 6px -3px 0px;" src="https://community.bridgeapp.com/resources/statics/2046/jive_doc_icon.png?a=1475872302598">Travel Policy: The "Director's Cut"</a></p>
            <p><a href="https://community.canvaslms.com/docs/DOC-8001" target="_top"><img style="margin: 0px 6px -3px 0px;" src="https://community.bridgeapp.com/resources/statics/2046/jive_doc_icon.png?a=1475872302598">How to Submit an Expense Report</a></p>
            -->
    </div>
</div>

<div id="floating-box">
    <div>
        <div id="circle">
            <img class="images" style=" margin-top: 10px;" src="https://community.bridgeapp.com/resources/statics/2089/docs_guides.png?a=1475860936889" />
        </div>
    </div>
    <div class="links">
        <h1>Official Documents & Guides</h1>
        <h2 id="inner2">We...

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;
    color: #66B9DA;
}

h2 { 
    display: block;
    font-size: 1em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    width: 80%;
    font-weight: normal;
}

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

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

#floating-box {
    display: inline-block;
    width: 300px;
    height: 340px;
    padding: 5px;
    vertical-align: top;
}

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

.images {
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    height: auto;
}

#inner2 {
    width: 75%;
    margin: 0 auto; 
    text-align: center;
}

.links {
    width: 100%;
}

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