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 
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.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
try float: right css property to pin the close signature to right side.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With