CODEWITHSUNDEEP
cssposition
Thuong Nguyen
Thuong Nguyen

Reputation: 592

'position: absolute; bottom: 0' does not work when parent position is relative

I have a css code.

Why the bottom: 0 does not work when the position: relative;?

If I give up position: relative;, the bottom works but float: left and float: right are not at width: 930px;.

sorry my bad english

#main {
  position: relative;
  width: 930px;
  padding: 10px;
  margin: 0 auto;
}

#left {
  position: absolute;
  left: 0;
}

#right {
  position: absolute;
  right: 0;
}

#bottom {
  position: absolute;
  bottom: 0;
}
<div id="main">
  <div id="left">
    Left
  </div>
  <div id="right">
    Right
  </div>
  <div id="bottom">
    Bottom
  </div>
</div>

Upvotes: 25

Views: 80380

Answers (2)

Jashwant
Jashwant

Reputation: 29005

This is not the way to go, use float for such type of layout.

Coming back to your question,

bottom:0 is working fine but since your main doesnt have height, you are not seeing it,

Do this for #main,

    #main
    {
        position: relative;
        width: 930px;
        padding:10px;
        margin:0 auto; 
        height:200px;
    }

Edit:

You can use,

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    position:absolute;
    left:0;
    top:0;
}

#right {
 position:absolute;
 right:0;
 top:0;
}

#bottom {
    left:0;
    position: absolute;
    bottom:-20px;
}

but I wont recommend this ( I said earlier this layout should not be handled by float) absolute does not account for position of other elements, so this code will break if #left has more height.

If I were you, I would have used this,

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    float:left;
}

#right {
  float:right;
}

#bottom {
    clear:both;
}

Upvotes: 3

peirix
peirix

Reputation: 37751

That's because when you're setting position:relative on main, then position:absolute will be relative to the parent. And your #main div has no height, which causes the #bottom to not be at the bottom of the page.

Upvotes: 45

Related Questions