CODEWITHSUNDEEP
htmlcss
Scott
Scott

Reputation: 65

How to put two span tags on the same line?

I am trying to put the name and address on the same line with address way on the right and title on the left. What it is doing is putting the address down a line instead of on the same line as name. How can I fix this? Here is the code:

<p>
<span id="name">First Last</span> 
<span id="address">123 Address Rd.</span>
</p>


#name{
font-size:18px;
float:left;
color:white;
padding-top:30px;

}
#address{
float:left;
font-size:12px;
padding-left:400px;
color:white;
width:300px;
}

Upvotes: 2

Views: 15775

Answers (3)

Alberto
Alberto

Reputation: 4282

<div style="text-align:right;width:100%">
    <span style="float:left">Left text</span>
    Right text
</div>

These elements will be displayed on the same line, you can even set the parent's div text-align to left and make the span floating right ! Like

<div style="text-align:left;width:100%">
<span style="float:right">Right text</span>
Left text
</div>

Upvotes: 1

ebo
ebo

Reputation: 2747

You can simply remove the float:left; and the texts will line up as expected. See the following code-snippet:

#name{
font-size:18px;
color:blue;
padding-top:30px;

}
#address{
font-size:12px;
padding-left:400px;
color:red;
width:300px;
}
<p>
<span id="name">First Last</span> 
<span id="address">123 Address Rd.</span>
</p>

If you absolutely need to have the float:left;, you can also get the text on the same level by making sure the top-padding of the smaller text has the correct offset, i.e. that a smaller font has more top-padding. You also need to make sure that the text is aligned to the right:

#name{
font-size:18px;
float:left;
padding-top:30px;
color:red;  
}
#address{
font-size:12px;
padding-top:36px;
float:left;
text-align:right;  
width:300px;
color:red;
}
<p>
<span id="name">First Last</span> 
<span id="address">123 Address Rd.</span>
</p>

Upvotes: 1

Praveen Kavuri
Praveen Kavuri

Reputation: 355

If you float the elements you need to add same line-height and padding to align them in a line.

Upvotes: 0

Related Questions