Menu
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.
921
In terms of your original issue you can try using float and margin-right css properties to position the button accordingly. Check out this jsfiddle.
The “display” and “position” property of CSS is utilized to adjust the button at the bottom of the div. Using the position property, set the value of position to parent element as “relative” and child element as “absolute”, and for the display property, set it to value as “flex”.
The simplest way to do this is by using the WordPress CSS Editor. To open this, go to Appearance » Customize and select Additional CSS. Once you've opened the Additional CSS section, you can paste in your new CSS, click the Save & Publish button, and you're all set!
A simple problem but many new developers don't know how to do this. Set CSS Position property to fixed, bottom and right properties to 0px. Use cases : A feedback button or a chat window.
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).
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
