CODEWITHSUNDEEP
jquerycsshtml
Sven Grosen
Sven Grosen

Reputation: 5636

Right Align Button inside DIV

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.

Upvotes: 8

Views: 38737

Answers (4)

Prem Anand
Prem Anand

Reputation: 1496

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

Upvotes: 13

Robert Hickman
Robert Hickman

Reputation: 1147

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;
}

Upvotes: 1

Josh Powell
Josh Powell

Reputation: 6297

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

Upvotes: 0

haseebahmad
haseebahmad

Reputation: 563

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

Upvotes: 1

Related Questions