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. float
s 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.