Image positon with CSS

[larrytotter89]

Hi,
Thanks for reading my post. I have a site and what I'm trying to do is put an image left, center, or right positioning on top of a header that's set as the background. I've looked around on the web, and tried a bunch of different things but I still can't seem to get it to work. This site kind of has it the way I want...(And I'm sure if I want it left right center whatever that it shouldn't be a problem to change if I want to change my mind on it's alignment.) The site's URL: (It's far from done...)(And I don't have a lot of experience; I'm using a template.)
http://shutterbug.free hostia.com/WebsiteTest/

Thanks in advance, and take it easy!

[AricC]

This might help if not post your source code.

[larrytotter89]

Thanks for your reply! With that code, and fooling around with some padding and floating, I've got it to work with left and right. Now I'd like to try to see if I can get it centered (without using padding, and the site's at moving 85% width). Here is the code I'm using now.

<style type="text/css">
.headerfloatimg{
padding:0px 7px 0px 0px;
position:right;
float:left;
border:1px solid red;
height:relative;
width:172px;
}
.headerfloatimg img{
padding:0px 7px 0px 0px;
position:right;
float:left;
height:relative;
width:relative;
top:0px;
right:0px;

}
</style>
-------------------------------------
<div class="headerfloatimg"><img src="images/logo.png"></img></div>

Thanks, I much appreciate it!

[AricC]

Can you post a link so we can see what you are trying to do?

[larrytotter89]

Sure.
http://shutterbug.free hostia.com/WebsiteTest/
Ignore the padding and the border for now...Also, I'll be using a different image than that one, but that shouldn't change much.
I have left and right covered, I just would like to try center (I don't know which one I wan to use yet because I'm going to change the banner). And the image is of course the one that says Nautica Liquid

Thanks!

[AricC]

Try:

margin-right: auto;
margin-left: auto;

[drhowarddrfine]

Some of your attributes don't exit. See if this is what you want:

.headerfloatimg {
padding:0px 7px 0px 0px;
margin:0 auto;
border:1px solid red;
width:172px;
}
.headerfloatimg img{
padding:0px 7px 0px 0px;
top:0px;
right:0px;
}

There is no 'position:right ' or 'height: relative' or 'width:relative '
Also, you can remove the red border because it was only placed there to highlight it.

[AricC]

Not sure that it matters I think dr fixed your problem but there is a position: relative doubt you need it in this instance.

[larrytotter89]

Thanks for all of your help. I'm just keeping that border for now; I'll take it off once the header is all set. The center thing works, but it messes up a couple of images and pushes it down... I wish there could be a float:center lol. Other than that I'm all set.

http://shutterbug.freehostia.com/WebsiteTest/

Thanks in advance!