CODEWITHSUNDEEP
csspositioningcss-position
Jon
Jon

Reputation: 3194

Issues with bottom, right absolute positioning

I'm trying to position a checkbox at the bottom right of a div container. The container will grow in height on hover, and I want the checkbox to be sticky so that it remains at the bottom right as the div grows.

I'm having some real trouble getting the checkbox to be in the bottom right.

Here's my code, and a Fiddle.

<div class="objectWrap">
    <div class="calendarObject">
        <label class="objectTitle" for="chkOb2">Tasks</span>
        <input type="checkbox" id="chkOb2" />
    </div>
</div>

.objectWrap {
    position:relative;
    float:left;
    height:75px;
    margin-bottom:15px;
}
    .objectWrap:not(:last-child) {
        margin-right:15px;
    }
    .objectWrap:hover {
        cursor:pointer;
    }

.calendarObject {
    position:relative;
    width:72px;
    height:75%;
    background-color:#f5f5f5;
    border-radius:5px;

    transition: height 400ms;
    -webkit-transition: height 400ms;
}
    .calendarObject label.objectTitle {
        position:absolute;
        top:3px;
        left:3px;

        font-size:13px;
        color: #8998a4;
    }
    .calendarObject input[type="checkbox"] {
        position:absolute;
        bottom:0px;
        right:0px;
    }
    .calendarObject:hover {
        height:100%;
        transition: height 400ms;
        -webkit-transition: height 400ms;
    }

Upvotes: 0

Views: 217

Answers (2)

Alexandros K
Alexandros K

Reputation: 947

Your markup is not properly nested.. your label tag needs a closing label tag.. not a closing span tag.

Upvotes: 1

JSW189
JSW189

Reputation: 6325

You have a bug in your code. </span> should be </label>.

Corrected HTML:

<div class="objectWrap">
    <div class="calendarObject">
        <label class="objectTitle" for="chkOb2">Tasks</label>
        <input type="checkbox" id="chkOb2" />
    </div>
</div>​

Corrected JS Fiddle

Upvotes: 3

Related Questions