Buttons Going Astray

[Griffin54]

Hello!

I have a question regarding positioning.

On my web page I have a set of buttons in a horizontal row that I want to appear on a certain spot - lining up evenly with the left side of my image box. I can accomplish this on my screen using relative positioning but when I view this page in different resolutions my buttons move all over the place.

Not an uncommon problem I realize but I have tried all sorts of tricks to make them appear where I want them to but nothing is working for me. I tried using absolute positioning but with no luck either.

For now I have centered them on the page using { margin-left: auto; margin-right: auto; } which works great on all sizes of screens. If I have to I will leave them centered just to make things easier.

However, my buttons look best where I originally intended them to be - lined up evenly with the left side of my image box.

Any suggestions? I am hoping that there is a snippet of html code I can add to make my button placement adjust to any size screen. If not, then maybe some javascript??

My url is as follows: http://www.learnanddobooks.com

Looking forward to your response.

[Borzoi]

What's the code you're using to try align it where you want?

[Griffin54]

What's the code you're using to try align it where you want?

Did you receive my reply to this question. I thought that I successfully answered you question above but I don't see my reply posted anywhere.

So I will repeat what I sent earlier.

Prior to centering my buttons with { margin-left: auto; margin-right: auto; } I was using the following code to place my buttons so that they lined up with the left side of my box image:

#web-buttons-####### { margin-left: 34em; padding-top: 180px; }

Now this worked fine on my screen of course but not on other screen resolutions.

Is there a snippet of html of javascript I can use to place my buttons in the desired location on all screen resolutions?

Looking forward to your response. Thank you.

[Borzoi]

I had a look at your source code and have an idea which may work.

Try this:

Get rid of the margins in the table then wrap the table in a <div> tag with the width of the image you're trying to align it with like this:

<div style="width: 900px; margin-left:auto; margin-right:auto;"><table id="web-buttons-idld2xa">REST OF MENU BUTTON CODE</table></div>

All you'll need to do is replace the 900px with whatever the width of the section you want to align it with is.

[Griffin54]

Hello Borzoi;

Just wanted to let you know that I tried what you suggested and it worked like a charm. Thank you for taking the time to respond to my question.
I really appreciate your help.
Thanks again.

[Borzoi]

You're welcome.