CODEWITHSUNDEEP
css
John Livermore
John Livermore

Reputation: 31313

inner DIV locked to lower right hand corner of outer DIV

Given the following HTML

<div style="width: 500px; height: 500px; border: 1px solid red;">
    <div style="width: 200px; height: 100px; border: 1px solid green; float: right; vertical-align: bottom;">
    </div>
</div>

I would like the inner div to lock into the lower right hand corner of the outer div. What do I need to do CSS wise to make that happen?

Thanks! John

Upvotes: 31

Views: 37530

Answers (2)

Luca Rocchi
Luca Rocchi

Reputation: 6464

position is your friend

<div style="width: 500px; height: 150px; border: 1px solid red; position: relative">
    <div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;">
    </div>
</div>

Upvotes: 59

brettkelly
brettkelly

Reputation: 28205

<div style="position:relative; width: 500px; height: 500px; border: 1px solid red;">
    <div style="position:absolute;right:0px;bottom:0px;width: 200px; height: 100px; border: 1px solid green;">
    </div>
</div>

Give that a try. Short version: position:relative on the outer div, position:absolute on the inner div and tell it you want the inner div to be 0 pixels from the right and bottom edges of the parent container.

Upvotes: 10

Related Questions