CODEWITHSUNDEEP
css
Phil
Phil

Reputation: 164892

Position bottom edge of element inside container

I have a container div (red) with a top padding of 400px. The content within (blue) may be any height. I also have another element (green) with a fixed width but variable height depending on content.

example

I want to be able to position the green element's bottom edge at the top of the blue content (ie, 400px from the top of the red container).

Example markup

<div class="red-container">

    <div class="green-thingy">Some text here</div>

    <div class="blue-content">
        <p>blah blah blah...</p>
        <p>blah blah blah...</p>
    </div>
</div>

Anyone know any CSS tricks that would let me do this?

Upvotes: 0

Views: 663

Answers (1)

Guffa
Guffa

Reputation: 700552

You can't position the bottom of an element relative to the top of the parent element.

Add another element with the height 400 positioned at the top of the container, and put the green div inside it positioned at the bottom.

Upvotes: 3

Related Questions