Right Align Button inside DIV

css, html, jquery

Solution

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

Problem

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.

Original source

Related problems