Align image to top right

Question

My site has a logo with images on both sides. I know the width and height of the logo, but the images vary. I have placed an image in the top left corner and did a 10x10px margin. I now want to do the same for the other side but its not working. I did the bg position property and set it to top right but it didn't do anything. Thanks.

CSS

#leftpic {
    background-position: left top;
    background: url('Images/left_pic.png') no-repeat;
    height : 133px;
    padding : 0;
    margin: 10px 10px 10px 10px;
    width: 138px;
}

#rightpic {
    background-position: top right;
    background: url('Images/left_pic.png') no-repeat;
    height : 133px;
    padding : 0;

    width: 138px;
}

#masthead {
    background-position: center bottom;
    background: url('Images/logo.png') no-repeat center
bottom;
    height : 160px;
    padding : 0;
    margin: 10px auto 0 auto;
    width: 910px;

}

html

<div id="masthead">
    <div id="leftpic">

</div>

    <div id="rightpic">

</div>


</div>

Answer 1

Add float: left and float: right to your leftpic and rightpic ids:

#leftpic {
background-position: left top;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
margin: 10px;
width: 138px;
float: left;
}

#rightpic {
background-position: top right;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
width: 138px;
float: right;
margin: 10px;
}

As a matter of CSS best practice, I suggest also using a masthead-image class to contain the CSS both the right and left images will use:

CSS:

.masthead-image {
    width: 138px;
    height: 133px;
    margin: 10px;
    padding: 0;
}

#leftpic {
    background: url('Images/left_pic.png') no-repeat left top;
    float: left;
}

#rightpic {
    background: url('Images/right_pic.png') no-repeat right top;
    float: right;
}

#masthead {
    background: url('Images/logo.png') no-repeat center bottom;
    height : 160px;
    padding : 0;
    margin: 10px auto 0 auto;
    width: 910px;
}

HTML:

<div id="masthead">
    <div id="leftpic" class="masthead-image"></div>
    <div id="rightpic" class="masthead-image"></div>
</div>

Answer 2

Have you tried using float: right and float: left or does this not suit your needs?