Right Align Button inside DIV

Question

I'm more comforable as a back-end developer, but I've got a styling question that has me stumped. I've got a sample of my scenario posted here.

I'm creating a div that is shown/hidden based on a button click to show details for a particular item. That part is working fine, but the layout of this is not quite there.

Here's the basic layout:

<div id="signaturePopup">
    <label id="signatureTitle">View Signature</label>
    <div id="signatureImage">
        <!--Contains img-->
    </div>
    <div id="signatureFooter">
        <div id="signatureStatus">
            <!-- Contains another img -->
        </div>
        <label id="signatureUserDetails">Added via JS</label>
        <!-- This is the problematic control-->
        <input id="closeSignature" type="button" value="Close" />
    </div>
</div>

With accompanying CSS:

#signatureTitle {
    text-transform: uppercase;
    font-size: 16px;
}
#signatureFooter {
    bottom: 0;
    position: absolute;
}
#signatureFooter > div, #signatureFooter > label, #signatureFooter > input {
    display: inline;
}
#signatureFooter > input {
    right: 0;
    align: 
}
#signatureImage > img {
    height: 90%;
    width: 90%;
    border: grey 1px solid;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

I want everything in the div signatureFooter pinned to the bottom, which is working fine with my existing CSS. However, inside of that div, I want closeSignature to be pinned to the right. I've tried playing with the position attribute, like giving it absolute but that pushes it outside of the containing div signaturePopup. What am I missing? I'm assuming this is easy, but, as I mentioned earlier, CSS is not my strong-suit. Any suggestions on easier/better overall layout would also be welcome.

I am using jQuery to dynamically add the img controls, if that opens up any possibilities.

This question seemed somewhat similar at first glance, but I don't think I am dealing with any div's being too large.

EDIT
Two details I omitted originally are

I want the signatureStatus and signatureUserDetails controls to stay left-aligned. I only want closeSignature pinned to the right.
signatureFooter needs to stay below signatureImage, some of the initial answers have them overlapping.

Prem Anand · Accepted Answer · 2014-02-11T19:48:31.327

13

set the width of the parent div to 100%.So you can float the close button right.

#signatureFooter > input {
float:right;
}

#signatureFooter {
    bottom: 0;
    position: absolute;
    width:100%;

JSFiddle

edited Feb 11 '14 at 19:48

answered Feb 11 '14 at 17:24

Prem Anand

1,496
2
12
30

I assume you mean "right", not "left" here (that's what you have in your fiddle). – Sven Grosen Feb 11 '14 at 17:41
Otherwise, your answer is exactly what I was looking for. – Sven Grosen Feb 11 '14 at 17:53

score 1 · Answer 2 · answered Feb 11 '14 at 17:14

1

try float: right css property to pin the close signature to right side.

answered Feb 11 '14 at 17:14

haseebahmad

513
5
10

Er, yes it does? This exactly answers the question, even if it is not a lot of detail and a great answer it is how to solve his problem – Dan May 11 '15 at 09:07

score 1 · Answer 3 · answered Feb 11 '14 at 17:18

1

Just so you know, CSS has some weird issues with inheritance, especially around the position attribute. Give the signaturePopup div a position of relative and then try playing with the positioning.

Here is a fiddle that I think does what you want: http://jsfiddle.net/k9HxW/

Also, note that we usually try not to put styles onto IDs in CSS and instead try to give them to classes:

.signaturePopup{
    position: relative;
}

answered Feb 11 '14 at 17:18

Robert Hickman

997
1
11
22

Thanks for the note on IDs vs classes. I am well-versed in selectors, but had never given much thought to whether there was a "best practice" around which to use. – Sven Grosen Feb 11 '14 at 17:30
@ledbutter As far as I *know,* IDs are reserved for use in HTML where javascript will later manipulate that element in a non-styling related way. It should also be noted that CSS gives different priority to different kinds of selectors (e.g. tag names, classes, or IDs). Check out this thread: http://stackoverflow.com/questions/4072365/css-understanding-the-selectors-priority-specificity – Robert Hickman Feb 11 '14 at 17:42
See my update about wanting only the button right-aligned, the rest should stay left-aligned. – Sven Grosen Feb 11 '14 at 17:52
@ledbutter I'm a little confused. You want the styling to match your original fiddle, except you want (just) the close button to be on the right side of the page? If that's what you want, try this: http://jsfiddle.net/44s66/ – Robert Hickman Feb 11 '14 at 17:58

score 0 · Answer 4 · answered Feb 11 '14 at 17:15

You need to give the parent element position: relative; if you are using absolute positioned elements.

css:

#signaturePopup {
    position: relative;
}

#signatureFooter {
    bottom: 0;
    right: 0;
    position: absolute;
    background: #f7f7f7;
}

Finally, a fiddle: Demo

Right Align Button inside DIV

4 Answers4

Linked