CODEWITHSUNDEEP
htmlcssalignment
qadenza
qadenza

Reputation: 9293

How to align parts of a div content?

I have a small info div and want to align right side of info content, i.e. 065 31 323 323, [email protected] and qadenza323 should be left aligned. I tried with different number of spaces and non-breaking spaces - without success.

<div id="divInfo">
<div>Mobile - 065 31 323 323</div>
<div>Gmail - [email protected]</div>
<div>Skype - qadenza323</div>
</div>

#divInfo{
    display:inline-block;
    margin-left:29vw;
    border:thin solid red;
}
#divInfo div{
    padding:2px 5px;
    border-radius:7px;
    cursor:pointer;
}
#divInfo div:hover{
    background:#e1e1e1;
}

the fiddle is here

Upvotes: 0

Views: 48

Answers (2)

Chinmay235
Chinmay235

Reputation: 3414

I have checked your code. Here is some changes please check -

Add span tag which you want to align right

<div id="divInfo">
<div><span>- Mobile</span> 065 31 323 323</div>
<div><span> - Gmail</span>[email protected]</div>
<div><span> - Skype</span>qadenza323</div>
</div>

Add one css class make float:right; 

#divInfo span{
    float:right;
}

Upvotes: 1

prtksxna
prtksxna

Reputation: 643

Use a table if the rest of the content needs to aligned to the left too. You can use tr:hover to change the background as well. http://jsfiddle.net/VLjRK/5/

To align the information to the right side and the names to the left you'll have to add an inline HTML element such as a span and float it to the right. I have updated your jsFiddle here - http://jsfiddle.net/VLjRK/3/

Upvotes: 1

Related Questions