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/

score 1 · Accepted Answer · answered Feb 03 '14 at 19:05

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.

answered Feb 03 '14 at 19:05

2ndkauboy

9,302
3
31
65

You can use #staff-1 as well, but as @datamafia mentioned, an ID should only occur once in the DOM. – 2ndkauboy Feb 03 '14 at 19:08
inline-block worked for me. i planned on changing the id's anyways. so this was the better option for me. – Ryan Salmons Feb 03 '14 at 19:10
Using an ID for "any" styling is always a bad idea (except of being part of a parent selector)! And even though you should not use the same ID for two elements, the browser would still apply the styles on both elements with the same ID. But really, don't do this ;) – 2ndkauboy Feb 03 '14 at 19:12
yeah understood. i switched everything to classes that i planned on repeating. – Ryan Salmons Feb 03 '14 at 19:15

PressingOnAlways · Answer 2 · 2014-02-03T19:08:18.433

0

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.

edited Feb 03 '14 at 19:08

answered Feb 03 '14 at 18:53

PressingOnAlways

11,948
6
32
59

yeah I know floats, but it still positions it on the next line, just floated to the right. – Ryan Salmons Feb 03 '14 at 18:57

score 0 · Answer 3 · answered Feb 03 '14 at 19:03

0

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

answered Feb 03 '14 at 19:03

Marc

1,895
18
25

div alignments will not position side by side

3 Answers3