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.

Answer 2

IDs "staff-1", "brian" and "DIV_2" are repeated. DOM id is unique.

Answer 3

You simply need to use css float to get them to be side by side.

.contact {
    overflow: hidden;
}

.team {
    float:left;
}

Here is your example code:

http://jsfiddle.net/jcfB3/

Note, your IDs were incorrect, you can't have 2 IDs that have the same value, I made them unique. Also, utilizing floats without any other content in a bounding block element has some issues which I fixed in the example code. See http://www.quirksmode.org/css/clearing.html for more info. It is the reason why I added overflow: hidden.