Right aligning icons

Can anyone see why the two icons (top left) here http://bit.ly/VdKeva are not right aligned?

They are enclosed in div id="horizontalAlign" but have jump out of that container div.
brettrAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
If you attach it to a class or id it should work.  


.social-sprite .spriteright {
      margin-top: 20px;
      padding: 10px;
      float: right;
}
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
They look right aligned.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Ooops, I meant they look left aligned.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Find where you have this line in your css, ".social-sprite .spriteleft, .social-sprite .spriteright"

and change it to below.  

.social-sprite .spriteleft, .social-sprite .spriteright {
      margin: 0;
      padding: 0;
      float: right;
}

I would probably even go further and split left and right

.social-sprite .spriteright {
      margin: 0;
      padding: 0;
      float: right;
}
.social-sprite .spriteleft{
      margin: 0;
      padding: 0;
      float: left;
}
0
 
brettrAuthor Commented:
Perfect.  Thanks.  

One more thing, is it possible to add padding or margin top so there is a small buffer under the horizontal line.

I did add

margin: 10 0 0 0;

But it looks like...

* {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

Open in new window

...is overriding it.
0
 
Pratima PharandeCommented:
try

margin: 10px 0px 0px 0px;

Or 4 different

margin-top:100px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;

refer
http://www.w3schools.com/css/css_margin.asp
0
 
brettrAuthor Commented:
Nice.  I went with this:

.social-sprite .spriteright {
      margin-top: 10px;
      padding: 0;
      float: right;
}

For the margins, why wasn't it necessary to set left, right, and bottom?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Leaving something blank is the same as setting it to the default property.  http://www.w3.org/TR/CSS21/propidx.html or a previously set property.   The object is to have the least amount of code possible not the more.
0
 
brettrAuthor Commented:
Super.  Thanks again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.