asked on

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.

Scott Fell

They look right aligned.

Scott Fell

Ooops, I meant they look left aligned.

Scott Fell

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

brettr

ASKER

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.

Pratima

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

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

brettr

ASKER

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?

Scott Fell

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.

brettr

ASKER

Super. Thanks again.