CSS does not obey margin-right

Asked

Viewed 477 times

3

I just don’t understand why the third line doesn’t align with the rest of the text. http://jsfiddle.net/Ra35L/2/

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;
}
css

  • all is rest is to which side? Left or right?

  • It’s all against the right

  • I suggest avoiding <br />(s) and spaces like that... that’s what you’re looking for? http://jsfiddle.net/Ra35L/3/

  • Exactly, but why the '<br>' harms these formatting?

  • @Miguel, I answered below, more detailed than would have space here in the comments.

  • For you to see neh, no one can put a thinking mind on stackoverflow pt

Show 1 more comment

3 answers

1


You can use the property text-align. Example, that 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;
}

  • Obgado, it seems to me to be the most logical answer even though they all work. http://jsfiddle.net/Ra35L/9/

0

  • Very obvious. Why the '<br>' impairs formatting?

  • It doesn’t really hurt, but usually we do <br /> in larger text ... tags so gets organized with p

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 I did?

I closed the <p> before the <a> and opened again at the end of </a>; Placed margin-right: 25px; in the CSS #contact a to get everything in line.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.