Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Right Align Button inside DIV

Tags:

html

jquery

css

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

  1. I want the signatureStatus and signatureUserDetails controls to stay left-aligned. I only want closeSignature pinned to the right.
  2. signatureFooter needs to stay below signatureImage, some of the initial answers have them overlapping.
like image 735
Sven Grosen Avatar asked Feb 11 '14 17:02

Sven Grosen


2 Answers

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

like image 193
Prem Anand Avatar answered Oct 11 '22 11:10

Prem Anand


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

like image 40
haseebahmad Avatar answered Oct 11 '22 10:10

haseebahmad