Float left - float right breaks in IE9 only?

Question

Hm, I cannot work this out, seems like all "capable" browsers can handle this (including IE8 and that's not even capable, hah) but IE9 can't. I have the following HTML:

<div class="contact_info_city" id="contact_info_cityX">
    <h3>City name</h3>
    <div>
        <div>
            <p class="office_tel"><span class="tel_text">Tel.:</span><span class="tel_no">+000 000 000 000</span></p>
            <p class="office_email"><span class="email_text">Email:</span><span class="email_address">somelonglongemailaddressthatdoesntfit@site.com</span></p>
        </div>
    </div>
</div>

And the CSS:

#contact_info_cityX {
    width: 500px;
}
.contact_info_city h3 {
    text-align: center;
    font-size: 25px;
    letter-spacing: 0;
    height: 56px;
}
.contact_info_city > div > div {
    display: inline-block;
}

.contact_info_city > div {
    text-align: center;
    margin-top: 35px;
}
.office_tel {
    font-size: 20px;
}
.office_tel .tel_text {
    color: #262626;
    float: left;
}
.office_tel .tel_no {
    float: right;
}
.office_email {
    font-size: 16px;
    clear: both;
}
.office_email .email_text {
    color: red;
    float: left;
}
.office_email .email_address {
    color: red;
    float: right;
}

Basically all it does is: It puts a h3 city name, and aligns (or should) the tel. and email texts to the left, each on its own line, while putting the actual phone number and email address to the right of the respective text. If the email address is longer than the phone number, it should simply align them to the right with a bigger spacing between "Tel.: " and the phone number. This is what I would expect to see (all browsers except of IE9):

This is what I see in IE9 (smaller picture as just took a screen from browserstack):

I don't understand the linebreak before the email address. Anybody knows how to solve this? Thanks a lot!

jsfiddle

Answer 1

Alright, so you should REALLY clean this up (you are not using classes very effectively, i just did not have the time to clean it up), but I updated your HTML to have some additional classes:

<div class="contact_info_city" id="contact_info_cityX">
    <h3>City name</h3>
    <div>
        <div>
            <p class="office_tel item"><span class="tel_text label">Tel.:</span><span class="tel_no value">+000 000 000 000</span></p>
            <p class="office_email item"><span class="email_text label">Email:</span><span class="email_address value">somelonglongemailaddressthatdoesntfit@site.com</span></p>
        </div>
    </div>
</div>

And got rid of all the floats and crap, using display:inline-block; and text-align instead:

#contact_info_cityX {
    width: 500px;
}
.contact_info_city h3 {
    text-align: center;
    font-size: 25px;
    letter-spacing: 0;
    height: 56px;
}
.contact_info_city > div > div {
    display: inline-block;
}

.contact_info_city > div {
    text-align: center;
    margin-top: 35px;
}
.office_tel {
    font-size: 20px;
}
.office_tel .tel_text {
    color: #262626;
    text-align: left;
}
.office_tel .tel_no {
    text-align: right;
}
.office_email {
    font-size: 16px;
    clear: both;
    white-space:nowrap;
}
.office_email .email_text {
    text-align:left;
}
.office_email .email_address {
    color: red;
    text-align:right;
}

.item span {
    display:inline-block;
    vertical-align:middle;

    /* make inline-block work on IE6 and 7 */
    *display:inline;
    *zoom:1;
}

.label {
    width:10%;
}

.value {
    width:90%;
}

This creates the effect you are looking for. Here is a jsFiddle to prove it.

Just as a side note, get more comfortable with the display property and its variety of uses. floats are just ... awful, archaic CSS pieces that have much cleaner and easier-to-manage replacement methods (display:inline-block being a great starting point). Just some friendly advice.

Answer 2

Do you have enough space for that long email address to fit? It looks like its running out of room so it is dropping to the next line.