Home/ Questions/Q 6122547
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:54:43+00:00

I have a page that already has a footer permanently bottom-aligned using a container

  • 0

I have a page that already has a footer permanently “bottom-aligned” using a container with 100% height and the following css:

#footer {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
font-size: 12px;
}

What I would like to do is have the buttons for my page’s form (denoted in the html below by the div with class “actionButtons”) always directly above the footer, regardless of the other content of the form. I can guarantee that the form’s content will never cause overflow.

<html>
<body>
    <div>
        <div class="wideContent">   
            <form>           
                <div class="actionButtons" style="text-align:right;">
                </div>
            </form>
        </div>    
    </div>

    <div id="footer"></div>   
</body>
</html>

I’ve been messing with height/min-height with no success. What css would I need for the html above to always place the “actionButtons” div at the bottom of the window, just above the footer? Thank you in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since the <form> has position:relative the only way I can think of forcing the buttons to the bottom is position:fixed, for example…

    #footer {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    font-size:12px;
    height:25px;
}

.actionButtons {
    position:fixed;
    bottom:25px;
    left:0;
    right:0;
    height:10px;
}

    …as in this demo. But it will require a height being set on the #footer which matches the bottom on the .actionButtons to place it correctly. (I have included a height on the .actionButtons for demo purposes).

    • 0