div alignments will not position side by side

Question

I have two div's that I am trying to position side by side but am having trouble. I understand that div's are block elements but I have never had trouble positioning them side-by-side before..

HTML:

<div class="contact">
    <div class="team" id="staff-1"> 
        <div id="DIV_2">
            <img id="brian" src="../img/brian.png">
        </div>
    </div>
    <div class="team" id="staff-1"> 
        <div id="DIV_2">
            <img id="brian" src="../img/brian.png">
        </div>
    </div>

</div>

I do not want to post all of the CSS because it is rather long for a SO post, but here it is loaded in a jsfiddle: http://jsfiddle.net/rynslmns/5pQJ7/

Answer 1

You can either use floating or inline-block elements:

.team {
    float: left;
    width: 33%;
}

OR

.team {
    display: inline-block;
    width: 33%;
}

I would choose "display: inline-block" as you don't have to clear the floating afterwards.