CODEWITHSUNDEEP
htmlcss
Mdd
Mdd

Reputation: 4400

Position a list at the bottom of it's containing element

I am trying to position a <ul> at the bottom of it's containing <div> using position:absolute I am not quite sure what I am missing, but the list is not appearing and when I inspect the element it looks like it is at the top of the containing element.

.container {
    width: 200px;
    height: 200px;
    background-color: #BFBFBF
}

.list-container {
    background-color: grey;
    position: relative;
}

ul {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
<div class="container">
    <div class="list-container">
        <ul>
            <li>
                <h2>Heading</h2>
            </li>
        </ul>
    </div>
</div>

Upvotes: 1

Views: 48

Answers (2)

afzalex
afzalex

Reputation: 8652

You were not setting the size of containing division.

.container {
    width: 200px;
    height: 200px;
    background-color: #BFBFBF
}

.list-container {
    width: 200px;
    height: 200px;
    background-color: grey;
    position: relative;
}

ul {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
<div class="container">
    <div class="list-container">
        <ul>
            <li>
                <h2>Hello</h2>
            </li>
        </ul>
    </div>
</div>

Upvotes: 1

GOTO 0
GOTO 0

Reputation: 47642

You need to set a height to the list-container, not to container.

.container {
    width: 200px;
    background-color: #BFBFBF;
}

.list-container {
    background-color: grey;
    height: 200px;
    position: relative;
}

ul {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
<div class="container">
    <div class="list-container">
        <ul>
            <li>
                <h2>Heading</h2>
            </li>
        </ul>
    </div>
</div>

Upvotes: 1

Related Questions