CODEWITHSUNDEEP
htmlcss
user1763032
user1763032

Reputation: 427

CSS: Positioning not working

I am trying to put two boxes stack over each other in the bottom of another div. I have the following code:

<div style = "height:400px;width:400px;border:1px solid #000;">
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
</div>

The problem is the boxes are in the top of their container not at the bottom. Help please.

Upvotes: 0

Views: 7858

Answers (5)

Wietse
Wietse

Reputation: 370

You have to make the container relative, and the boxes absolute:

<div style = "height:400px;width:400px;border:1px solid #000; position:relative;">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

EDIT FOR DEFINITVE ANSWER:

<div style = "height:400px;width:400px;border:1px solid #000; position: relative;">
    <div style = "position: absolute;height:100px;border:1px solid #000; bottom: 0;">
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;"></div>
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;">
    </div>
</div>

Upvotes: 1

Prabhu
Prabhu

Reputation: 1149

use bottom:0; in the second div, Then the first one in top another one in bottom

<div class="parent">
    <div class="div1">
    </div>
    <div class="div2">
    </div>
</div>

<style>
.parent
{
    height:400px;width:400px;border:1px solid #000;
    position:relative;
}
.div1
{
    position:absolute;
    height:100px;
    width:100px;border:1px solid #000;
}
.div2
{
    position:absolute;
    height:100px;
    width:100px;
    border:1px solid #000;
    bottom:0;
}
</style>

Upvotes: 1

naveen goyal
naveen goyal

Reputation: 4629

You have to add position relative to container div and absolute in child div. that bring the div in the bottom. avoid the overlapping both div change the bottom of the last div 

<div style = "height:400px;width:400px;border:1px solid #000;position:relative;">
    <div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
    <div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:100px;">
    </div>
</div>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115046

The wrapping div should have a position:relative and the two internal divs should have position:absolute.

<div style = "height:400px;width:400px;border:1px solid #000; position:relative">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

CSS-Tricks Video

Upvotes: 0

Mitya
Mitya

Reputation: 34556

1) Your container needs position 'relative'

2) Your boxes need position 'absolute', not 'relative'

Upvotes: 0

Related Questions