0

What I want: two small "back to the top" buttons, each in their own div. This div pair is within an outer div.

One button-div should be left-aligned in that outer div, the other button-div should be right-aligned. The idea is to have them "straddle" my page-container div.

All is well - until I give the outer-div a "position:fixed" and "top:70%", to move them down in the viewport.

So far, I have found no way to right-align the right button-div; margin-right has no effect, even if I remove the left button (in case its alignment impacts the element(s) that follow).

The basic approach is:

<div class="tabs1">
<div>
    <a href="#top-of-page">           
        <div class="right1">
            <font color="#FF0000">◄</font> Top
        </div>
    </a>
    <a href="#top-of-page">
        <div class="left1">
            <font color="#FF0000">◄</font> Top
        </div>
    </a>
</div>     

I have provided the above in fiddle here, both with & without vertical positioning.

The "results" window of the fiddle shows two pairs of "top" buttons. The pair at the top behaves like I want them to, until I try to move them down from the top of the viewport.

The second pair shows what all my attempts end up with: both buttons on the left of the page body/container div. In the fiddle, I have separated them vertically, otherwise they'd be on top of each other.

What's the "trick"?

1 Answer 1

0

You can use the right attribute; for example right: 10px;. And if you want it symmetric, you can use left for the left one.

EDIT:

OK, I misunderstood the question a bit. I'll try again: If you want the distance between the two buttons constant you can add a left: 50%; and then correct the positioning by adding a left margin half as big as the width. So that would look like this:

.tabs2 {
    width:250px;
    position:fixed;
    top:60%;
    left:50%;
    margin-left: -125px;
}

EDIT 2:

And if you only want this behavior starting at a certain screen-width you could add a media-query like so:

.tabs2 {
    width:100%;
    max-width: 250px;
    position:fixed;
    top:60%;
    left: 50%;
    margin-left: -50%;
}
@media (min-width: 250px) {
    .tabs2 {
        margin-left: -125px;
    }
}

Although I'm not sure this is the most ideal or clean way of doing it.

4
  • Indeed, but only for a single viewport width: the button on the left will always be at a fixed distance from the page-container, unless the viewport width is reduced such that the page-container width becomes smaller than its specified max-width.
    – Fred
    Feb 16, 2015 at 6:43
  • The button on the RIGHT moves away from the right edge of the page-container - further inside the page-container if the viewport shrinks, and away from the page-container edge if the viewport becomes larger than the page-container max-width. You can see this if you change the viewport width in the fiddle.
    – Fred
    Feb 16, 2015 at 6:54
  • @Fred OK, I changed my answer, hope I got it right now :)
    – kalyan
    Feb 16, 2015 at 8:43
  • Thanks kalyan! Can your solution be generalized from .tabs2 that has a fixed "width:250px", to handle "width:100%; max-width:250px"?
    – Fred
    Feb 17, 2015 at 21:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.