How to float a button in a responsive way?

Question

I have a webform and the user needs to click on 'save' often. So I'm trying to float the Save Button.

#floatButton {
   position: fixed;
   top: 900px;
   right: 90px;   
   text-align: center;    
}

<div id="floatButton">
    <asp:Button ID="SaveButton" runat="server" 
    onclick="SaveButton_Click" Text="Save" / >
</div>

The button looks good and floats with my current display settings(standard resolution). But on different display settings the button goes out of the form either towards the right of the form or at the bottom. I tried setting the position to 'relative' and 'absolute'. It didn't help. I would like to have the button within the form in all resolutions. How do I set that?

score 0 · Accepted Answer · answered Jul 08 '19 at 14:31

0

Try position: relative; for parent div and position: absolute for .floatbutton and fix the top and left accordingly

answered Jul 08 '19 at 14:31

kishore kingmaker

476
3
15

so do i need to add two divs? – Lotus Jul 08 '19 at 14:53
in your parent div that means the form div give position relative – kishore kingmaker Jul 08 '19 at 21:43
can u add a jsfiddle or code pen of ur code so that i can help u – kishore kingmaker Jul 11 '19 at 17:00
https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container helped.Thanks! – Lotus Jul 15 '19 at 14:52

How to float a button in a responsive way?

1 Answers1