asked on

Relative to parent

Im trying to make a counter div which has a title in the top and then the number below, however I cannot get the counter to line up, even though Im setting the div to be relative from bottom:-

What Im looking for is something like (so the count is relative to bottom, not depending on the title text):-

.divQC {
    position:relative;
    color: #ffffff;
    font-size: 28px;
    width:120px;
    height:30px;
    text-align: center;
    bottom:10px;
    left:0;
    right:0;
}

Open in new window

I put my code at https://jsfiddle.net/r46jehxd/ in the hope someone can help me correct me positining.

ste5an

It's a combination of position relative in the parent and position absolute in the child. E.g.

.tiles > div {
        color: #ffffff;
        float: left;
        margin: 2px;
        height: 120px;
        width: 120px;
        background-color: blue;
        position: relative;
    }
.tiles > div :first-child {
        font-size: 18px;
        width: 100%;
        text-align: left;
    }
.tiles > div :last-child {
        font-size: 28px;
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 0;
    }

Open in new window

<div class="tiles">
    <div>
        <div>My Queue</div>
        <div>67</div>
    </div>

    <div>
        <div>My Teams</div>
        <div>93</div>
    </div>

    <div>
        <div>Unassigned</div>
        <div>93</div>
    </div>

    <div>
        <div>OverDue - My Teams</div>
        <div>93</div>
    </div>
</div>

Open in new window

The relevant layout part:

.tiles > div {
        float: left;        
        position: relative;
    }
.tiles > div :first-child {
    }
.tiles > div :last-child {
        bottom: 0;
        position: absolute;
    }

Open in new window

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.