Comment puis-je faire une position: absolue; div à l'intérieur d'une position: relative; div travailler dans une mise en page centrée par marge: 0 auto ;?

Question

J'ai une mise en page centrée en utilisant margin:0 auto;, mais un de mes divs enfants ne se positionne pas absolument (par rapport à son parent). La page semble bien jusqu'à ce que la fenêtre est redimensionnée. Ensuite, le div enfant est poussé vers la droite et l'image du haut (dans une autre div) est tronquée.

De quels changements de code ai-je besoin?

Voici le CSS:

body { 
padding: 0; 
margin: 0; 
display: table; 
text-align: center; 
font-family:sans-serif; 
background: #FFF url("/images/businessmanbg.jpg") no-repeat center top; 
width: 100%; 
} 
#wrapper { 
margin: 0 auto; 
position: relative; 
} 
#container { 
margin: 0 auto; 
text-align: left; 
position: relative; 
} 
#topbar { 
background: #036 url("/images/topbar.jpg") no-repeat center top; 
border:0; 
position: relative; 
margin-top: -22px; 
padding:0; 
text-indent:-9999px; 
display: block; 
height: 111px; 
width: 100%; 
} 
#content { 
background: url("/images/copy-bg.png"); 
padding: 10px; 
position: absolute; 
margin-left: 900px; 
margin-top: 50px; 
text-align: left; 
width: 450px; 
} 

Merci pour votre aide!

EDIT (2:18 PM CDT): À la suggestion de quelqu'un d'autre, j'ai déplacé l'arrière-plan de l'homme d'affaires vers #container, ajouté une largeur fixe à #container et ajouté les positions haut et droit à #content. On dirait que le positionnement est correct, mais l'image de fond a disparu. Une idée pourquoi?

L'exemple ci-dessus a été mis à jour avec le CSS suivant (et je supprimé l'emballage DIV dans le HTML):

body { 
    padding: 0; 
    margin: 0; 
    display: table; 
    text-align: center; 
    font-family:sans-serif; 
    width: 100%; 
} 
#container { 
    margin: 0 auto; 
    text-align: left; 
    position: relative; 
    background: url("/images/businessmanbg.jpg") no-repeat center top; 
    width: 1280px; 
    z-index: 1; 
} 
#topbar { 
    background: #036 url("/images/topbar.jpg") no-repeat center top; 
    border:0; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    padding:0; 
    text-indent:-9999px; 
    display: block; 
    height: 111px; 
    width: 100%; 
    z-index: 2; 
} 
#content { 
    background: url("/images/copy-bg.png") repeat scroll 0 0 transparent; 
    padding: 10px; 
    position: absolute; 
    top:120px; 
    right:200px; 
    width: 450px; 
    z-index: 3; 
} 
ul, li, p { 
    font-size: .95em; 
    line-height: 1.5em; 
} 

Answer 1

Comme vous le savez la largeur de l'élément positionné absolu, vous pouvez définir à gauche: 50% marge gauche: -225px.

Ceci placera le bord gauche du conteneur au milieu de son enveloppe, puis le déplacera à gauche de la moitié de sa propre largeur. Cela fonctionnera lorsque vous connaîtrez la largeur du conteneur mais pas celle de l'encapsuleur.

C'est la seule méthode que je connaisse qui fonctionnera. Ce n'est pas très joli mais j'espère que ça fonctionne pour vous!

Answer 2

Vous ne savez pas exactement ce que vous essayez d'obtenir. ne sont pas nécessaires enrubanneuse et div conteneur de tout et essayez d'utiliser ce que vous #Content classe

#content 
{ 
    background:url("/images/copy-bg.png") repeat scroll 0 0 transparent; 
    float:right; 
    padding:10px; 
    text-align:left; 
    width:450px; 

}