absolute: bottom no funciona

Question

Tengo un código css. por qué el "fondo: 0" no funciona cuando la "posición: relativa;" si renuncio a "posición: relativa;" al "abajo" funciona pero "flotar: izquierda" y "flotar: derecha" no en "ancho: 930px;". lo siento mi mala Inglés

<style type="text/css"> 
#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; 
} 
</style> 

<div id="main"> 
    <div id="left"> 
     Left 
    </div> 
    <div id="right"> 
     Right 
    </div> 
    <div id="bottom"> 
     Bottom 
    </div> 
</div> 

Answer 1

Eso es porque cuando se está configurando en position:relative principal, luego position:absolute habrá relativa a los padres. Y su div #main no tiene altura, lo que hace que el #bottom no esté en la parte inferior de la página.

Answer 2

Este no es el camino a seguir, use float para ese tipo de diseño.

Volviendo a su pregunta,

bottom:0 está trabajando muy bien, pero desde su doesnt principal tiene la altura, no lo está viendo,

Haga esto por #main,

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

Editar:

Puede usar,

#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; 
} 

pero no voy a recomendar este (me dijo a principios de este diseño no debe ser manejado por float) absolute no tiene en cuenta position de otros elementos, por lo que este código se romperá si #left tiene más de altura.

Si yo fuera tú, me habría utilizado este,

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

#left { 
    float:left; 
} 

#right { 
    float:right; 
} 

#bottom { 
    clear:both; 
}