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.

Recommended Answers

All 5 Replies

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

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.

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.

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.

You're welcome.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.