CODEWITHSUNDEEP
jqueryhtmlcss
Madhuri Lad
Madhuri Lad

Reputation: 241

How to position inner div at the bottom of outer div without using absolute position in CSS

How to position inner div at the bottom of outer div without using absolute position in CSS? For below piece of code only last div should be aligned at bottom (other three should be at top as it is)?

<div>
<div id="wrapper" class="parent" style="height:600px; border: 1px solid red;">
<div style="border: 1px solid blue;">Fist</div>
<div style="border: 1px solid blue;">Second</div>
<div style="border: 1px solid blue;">Third</div>
<div style="border: 1px solid blue;"  class="child">Needs to be at bottom</div>
</div>
</div>

Upvotes: 2

Views: 154

Answers (2)

Juergen
Juergen

Reputation: 12728

Try this solution:

<div>
<div id="wrapper" class="parent" style="height:600px; border: 1px solid red; position:relative;">
<div style="border: 1px solid blue;">Fist</div>
<div style="border: 1px solid blue;">Second</div>
<div style="border: 1px solid blue;">Third</div>
<div style="border: 1px solid blue; position:absolute; bottom:0;"  class="child">Needs to be at bottom</div>
</div>
</div>

Position:absolute in this context positions absolute inside the containing box -- so it is not a positioning absolute to the document or the browser window.

See it in action with this fiddle: http://jsfiddle.net/fdxj1oue/

Upvotes: 2

Eiyad.Z
Eiyad.Z

Reputation: 21

You can use flex-box, it has a good support now in all major browsers. http://caniuse.com/#search=Flex

Solution:

Outer container

#wrapper {
Display: flex;
Flex-direction: column;
}

Inner container

.child {
margin-top: auto;
}

it's better to use last-child pseudo selector to always select the bottom div. check out this fiddle.

Upvotes: 2

Related Questions