CODEWITHSUNDEEP
cssasp.net-mvcrazoralignment
AJ.
AJ.

Reputation: 16719

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

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.

Upvotes: 4

Views: 16898

Answers (3)

Matt Borja
Matt Borja

Reputation: 1577

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.

Upvotes: 6

DangerMonkey
DangerMonkey

Reputation: 385

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

Upvotes: 6

rt2800
rt2800

Reputation: 3045

use following CSS for buttons (please adjust margins)

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

Upvotes: 0

Related Questions