Question

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>

Answer 1

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.