Position a block element in the bottom-right of a fieldset

Question

I have several Razor pages in an MVC4 project that follow a general layout that can be viewed here. Each page will have a fieldset, and most will have either a Save or Next or whatever kind of button. What I'd really like and can't figure out is how to get the Save/Next/Whatever button to always position in the lower-right corner of the fieldset. I've attempted solutions from a couple of other questions, but sadly none seem to apply to this situation. Is this even possible?

Here's the stylesheet.

Very nice question & answer, but the general layout is no longer working. — Luis Gouveia, Oct 24 '14 at 17:32
http://stackoverflow.com/questions/33342144/how-to-make-fieldset-postion-fixed-in-asp-net-based-on-the-visibility — Sachin, Oct 26 '15 at 09:20
http://stackoverflow.com/q/33342144/4323579 plz help me here — Sachin, Oct 26 '15 at 09:34

DangerMonkey · Accepted Answer · 2012-05-03T15:16:19.393

Put the fieldset in position:relative and put the button in Position:Aboslute with bottom:0 and right:0, this should work for one button, to place the others, do the same thing but change the right value to the combine width of the other buttons.

Example:

.lower-right-button{
    position:absolute;
    bottom: 0;
    right: 0;
}
<fieldset style="position: relative">
<input type="submit" value="Save" class="lower-right-button">
<input type="submit" value="New" class="lower-right-button" style="right: 110 px">
</fieldset>

EDIT: The bottom and right attributes align the bottom and right edge of the element with the bottom and right edge of its container. In that case, bottom: 0 and right: 0 will place it at 0 pixel from the bottom-right corner, you might want to put something else like bottom: 5px right:5px

EDIT AGAIN: Fixed, initial proposition didn't work, here's a JSFiddle

EDIT ONCE AGAIN: With Romias proposition, put the button in a div and position the div at bottom right instead, here's the updated JSFiddle

The best is putting the inputs in a div... to position the whole container. — Romias, May 03 '12 at 15:07
@Romias You are right, it would actually be better to put the div in `position: absolute` with `bottom:0` and `right:0` and place the buttons inside this div where you can position them however you like. — DangerMonkey, May 03 '12 at 15:12

score 6 · Answer 2 · answered May 03 '12 at 15:17

Relative first, then absolute.

It's quite simple really. The first step is to set the parent container's position property to relative as follows:

<fieldset style="position: relative;">
    ...
</fieldset>

This will set the boundaries for your next element to be positioned, only this time, using absolute positioning.

<div style="position: absolute; bottom: 0; right: 0;">
    <input type="submit" value="Save" />
</div>

Putting the two together:

<fieldset style="position: relative;">

    ...

    <div style="position: absolute; bottom: 0; right: 0;">
        <input type="submit" value="Save" />
    </div>
</fieldset>

After this, you can add some margin to this div tag (or pull away from the bottom right corner a little) to add some padding, throw in some styles, etc.

Pretty much what I said except you got it on first try instead of 3 edit later XD — DangerMonkey, May 03 '12 at 15:19

score 0 · Answer 3 · answered May 03 '12 at 14:57

0

use following CSS for buttons (please adjust margins)

position: relative;
margin-top: 45%;
margin-left: 90%;

answered May 03 '12 at 14:57

rt2800

3,045
2
19
26

Position a block element in the bottom-right of a fieldset

3 Answers3