Aligning buttons below a graphic header - html

Question

I have a header graphic that is positioned in centre of the page, being in the centre it moves according to the windows size, however I would like to put some buttons below it that are anchored to the left of the header so that when the header moves the buttons are always shewn starting below the lower left corner of the header graphic.
Is this possible ?
this is what I have in the html:
<div id="header">
<p class="centeredImage"><img src="supt_files/main_back.jpg" width="804" height="116" border="0" alt=""></p>
<div id="centretext">
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> How Do I... </button>
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Servers </button>
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Significant services </button>
</div>
</div> <!-- Header -->
in the css :
#header
{
width: 100%;
height: 157px;
position: relative;
top: 0px;
background-color: SlateGrey;
}
#centretext
{
text-align: center;
}

Answer 1

I would do this with CSS. You can either create a class that's centered with a defined width (anything within the div tags would align) or put it into your background definition so everything aligns.
With DIV tags:
Alter the HTML in the following way:
<div class="anchored">
images, etc (whatever you put here)
</div>
and then add the following to your CSS document:
.anchored{
display:block;
margin-left:auto;
margin-right:auto;
width:<whatever your banner/desired width is>;
}
This means that anything within the div tags will be aligned.
Whole Document:
The HTML can stay as it is, and add the following to your CSS document under body:
body{
width:<whatever your banner/desired width is>;
margin:auto auto;
}
This will make everything on the page--text, pictures, etc.--fit within the specified width, much like this page.
I hope that helps!