Need help with HTML code

[FastRedPonyCar]

I'm trying to get the masthead image of our myspace page centered up and the code I've got doesn't take different monitor sizes and resolution into proportional considerations.

for example, here's the masthead code I'm using.

.masthead {width: 1166px; height: 167px;
position: absolute; margin-left: 75px; left: 12%; top: 200px;
background-image:url(http://img.photobucket.com/albums/v212/fastredponycar/ChromeHeartBigLogo.png);}

And here's what it yields.

www.myspace.com/chromeheartband

now, that big chromeheart logo is perfectly centered on my 22" widescreen but not on a regular view ratio monitor or at a different resolution.

Is there coding that I can use to keep it centered up with equal padding on each side regardless of monitor resoulution or size/shape?

If so, what do I need to change? thanks!

[jcrox]

I've done it with JavaScript before... I'll see if I can find the code for that.

Edit: see if this helps: http://particletree.com/features/dynamic-resolution-dependent-layouts/

[t3hl33td4rg0n]

try this maybe?


.masthead {
width: 100%;
height: 167px;
position: absolute;
left: 0px;
top: 200px;
text-align: center; /* Doesn't Always Work */
}


then


<div class="masthead" align="center"><img src="http://img.photobucket.com/albums/v212/fastredponycar/ChromeHeartBigLogo.png" /></div>



Edit: Works fine... Keeps it centered everytime...

http://ngzroot.ath.cx:9999/masthead.html

[Bigbuck]

If you get rid of the div have this:

.masthead {
display: block;
margin-left: auto;
margin-right: auto;
}

<img class="masthead" src="http://img.photobucket.com/albums/v212/fastredponycar/ChromeHeartBigLogo.png">