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