Member Avatar for 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:

Looking forward to your response.

  • 2 Contributors
  • 5 Replies
  • 128 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Borzoi

Dani AI

Generated

Good call letting help — wrapping the button row in the same visual container as the image makes the left edges share the same coordinate system, so the buttons stop “drifting” when the viewport changes. That is the simplest, most robust idea; the rest is picking a layout method that keeps the buttons in the normal flow (or, if you need absolute placement, anchors them to the correct parent).

A modern, responsive pattern is to put the image and the controls inside one wrapper and use a layout system like Flexbox or Grid so the controls always line up with the image edge. Example structure (replace class names and sizes to match your markup):

<div class="card">
  <img class="card-img" src="..." alt="...">
  <div class="card-controls">
    <!-- buttons here -->
  </div>
</div>

<style>
.card {
  max-width: 780px;   /* container width that matches your visual box */
  box-sizing: border-box;
}
.card-controls {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
</style>

If you must use absolute positioning, put position: relative on the wrapper and then absolutely position the controls so left: 0 lines them up with the wrapper’s left edge — the common mistake is absolutely positioning against the page instead of the intended parent.

Quick troubleshooting checklist:

  • In DevTools, toggle an outline on the wrapper and controls to verify alignment and width.
  • Check computed position and offsetParent for the buttons if absolute positioning misbehaves.
  • Replace hard fixed offsets (large em/px values) with container-based layout or percent/max-width so things scale.
  • Add a small media query to stack or enlarge buttons on narrow screens for touch ergonomics and accessibility.

Credit to for the wrapper idea and to for confirming it fixed the problem; wrapping the controls with the image is the key.

Recommended Answers

All 5 Replies

Member Avatar for Borzoi

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

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for Borzoi

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.