CODEWITHSUNDEEP
htmlcss
user221459
user221459

Reputation: 85

how to put text at bottom of div that is inside another div

I have the following layout: enter image description here

and I want to put some text at bottom of div2 just like in the pic.

I have the following code:

<style>
        .grey_box {
            background-color: grey;
            width: 680px;
            height: 500px;
        }
        .yellow_box {
            background-color: yellow;
            width: 450px;
            height: 300px;
        }


    </style>
</head>
<body>
    <div class="grey_box">
        <div class="yellow_box">
            <h1>when I say div</h1>
        </div>
    </div>

Upvotes: 1

Views: 71

Answers (2)

John
John

Reputation: 5337

I am not sure as per your little drawing that you made if the h1 is needed to be inside of the inner div like your code suggests, but your drawing does not. If its not needed inside that inner div You can simply move the header text outside of the child div like this example. But otherwise if you want the text at the bottom of the inner div, and not outside of it then you can follow the answer provided by @thenomadicmann

     .grey_box {
            background-color: grey;
            width: 680px;
            height: 500px;
        }
        .yellow_box {
            background-color: yellow;
            width: 450px;
            height: 300px;
        }
<div class="grey_box">
        <div class="yellow_box">
        </div>
        <h1>when I say div</h1>
    </div>

Upvotes: 0

Tanner Mann
Tanner Mann

Reputation: 522

Add display: flex; and align-items: flex-end; to .yellow-box. See the snippet below:

<style>
        .grey_box {
            background-color: grey;
            width: 680px;
            height: 500px;
        }
        .yellow_box {
            display: flex;
            align-items: flex-end;
            background-color: yellow;
            width: 450px;
            height: 300px;
        }


    </style>
</head>
<body>
    <div class="grey_box">
        <div class="yellow_box">
            <h1>when I say div</h1>
        </div>
    </div>

Upvotes: 2

Related Questions