Question

I have an image in the css, but I want to add a link to that image so I pulled it out of the css and inserted directly in the HTML with an anchor tag.

I am having trouble aligning the image to the top left of the div class.

<div class="logoHeader" style="height:125px; width:900px" >
    <a href="http://www.abc123.com/">
        <img src="images/logo.jpg" alt="" style="position:relative;" />
    </a>
</div>

I’ve tried adding

style="padding-top:0px; padding-left:0px;"

but the image is floating instead of being in the top left corner.

Any thoughts on how to get the image to align to the top left corner via the HTML?

The div tag css is:

.logoHeader {padding:45px 20px 0px 20px;}

Answer 1

The padding is causing it to float, it’s conforming to the rules you set (have a margin of 45px), if you want it in the top left corner:

See http://jsfiddle.net/9KJA7/ for an example

/* Ignore */
.logoHeader {background-color: red}
img {height: 50px; width: 50px; background-color: green}

/* Your code */
.logoHeader {padding:45px 20px 0px 20px; position: relative}
​img {position:absolute;top:0px;left:0px;}​​​​​​