Question

I have the following HTML:

<div class="square">
    <a class="block" href="@Model.HyperLink1">
        <span>@Model.Text1</span>
    </a>
</div>

The CSS is:

.square {
    width: 140px;
    float: left;
}

.block {
    display: block;
    width: 140px;
    height: 140px;
}

a.block span {
    position: absolute;
    bottom: 0;
}

However the span appears at the bottom of my page not at the bottom of the square block I have defined.

How can I get the span or text of a hyperlink to appear at the bottom of the block?

Thanks

Answer 1

Add position: relative to the block.

.block {
    display: block;
    width: 140px;
    height: 140px;
    position: relative;
}