CSS does not obey the margin-right

Navigation
3

I just do not understand why the third line does not align with the rest of the text. link

HTML: 

<div id="contact"><h1>CONTACTO</h1>
    <p>+(351) 968 888 888&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+(351) 218 888 888<br><br>
    <a href="mailto:[email protected]" target="_blank">[email protected]</a><br><br>
    Avenida da República, Torre Soleil

</p></div>

CSS: 

#contact {
    width: 50%;
    float: left;
    background-color: #449DCC;
    height: 350px;
}
#contact h1 {
    color:#fff;
    font-size:18
}
#contact p {
    float: right;
    margin-right: 25px;
    font-size: 15px;
    color:#fff;
}
#contact a {
    float: right;
    font-size: 15px;
    color:#fff;
    text-decoration: underline;
}
    
asked by anonymous 28.04.2014 / 16:05

3 answers

1

You can use the text-align property. Example , which simply aligns all text in the position you specify (right, left, or center) 

#contact p {
    float: right;
    margin-right: 25px;
    text-align: right;
    font-size: 15px;
    color:#fff;
}
    
28.04.2014 / 16:13
0

I think what you want is this result:

jsfiddle 

<div id="contact"><h1>CONTACTO</h1>
   <p>+(351) 967 181 237&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+(351) 214 569 018<br><br></p>
   <a href="mailto:[email protected]" target="_blank">[email protected]</a><br><br>
   <p>Avenida da República, Torre Soleil</p>

</div>

. 

#contact a {
    float: right;
    font-size: 15px;
    margin-right: 25px;
    color:#fff;
    text-decoration: underline;
}

What did I do?

I closed <p> before <a> and reopened at the end of </a> ; I put margin-right: 25px; in CSS #contact a to be fine aligned.

    
28.04.2014 / 16:14
0

Put a <p>texto</p> for each line 

<div id="contact">
    <h1>CONTACTO</h1>
    <p>(351) 967 181 237&nbsp;(351) 214 569 018</p>
    <p><a href="mailto:[email protected]" target="_blank">[email protected]</a></p>
    <p>Avenida da República, Torre Soleil</p>
</div>

Link: link

    
28.04.2014 / 16:12
Conflicts between double tap and click. (jQuery and Hammer.js) Bootstrap navbar dropdown menu focus control after the click