Le positionnement des div à droite du div contenant

Je sais que cette question va vous sembler très simples mais je ne suis pas en mesure de le réparer.J'ai un div conteneur et im essayant de la position de l'enfant div à droite.J'ai essayé de positionner le conteneur div avec une relative et puis le positionnement de l'enfant div avec l'absolu,mais la div parent perd de sa largeur.Le positionnement des div à droite du div contenant

jetez un oeil à l'image ci-dessus,j'ai besoin de la div1 à se positionner à droite de la divContainer. J'ai d'autres divs imbriqués dans divContainer, j'ai besoin que div1 être postioned sur la droite.

div#divContainer{
    margin-left:auto;
    margin-right:auto;
    top: 0px;
    width:1000px;
    background:#666;
    position:relative;

}
div#div1{
    height:45px;width:200px;
    background:yellow;
    position:absolute;

}

CODE HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title></title>

    </head>
    <body>
        <div id="divContainer">
            <div id="div1"></div> 
        </div>
    </body>
</html>

OriginalL'auteur manraj82 | 2011-03-27

  1. 11

    En supposant que #div1 est une nav de type div, vous devriez juste flotter sur le côté que vous voulez.

    div#div1{
  height:45px;width:200px;
  background:yellow;
  float:right;
}

    Ce sera la position, il était absolument à l'intérieur de votre document. Si vous rencontrez des problèmes avec cela, vous pouvez consacrer un peu de temps à la lecture de quelques bonnes ressources au sujet de positionnement CSS. Une Liste À Part a de grandes ressources pour les CSS.

    Cela devrait fonctionner pour vous, il suffit d'ajouter du contenu à l'intérieur de #divContainer après #div1 et vous verrez que le conteneur se dilate pour s'adapter à ce contenu.

    OriginalL'auteur Matthew Lehner

  2. 2

    #divContainer ne devrait pas perdre sa largeur en fonction de votre description, mais il perdra de sa hauteur si tous ses enfants divs sont en position absolue.

    La meilleure méthode pour le positionnement #div1 dépend si vous voulez qu'il affecte la position de l'autre enfant de la vrd. Si oui, appliquer float: right; à #div1. Si non, position: absolute; est le chemin à parcourir; vous pouvez ajouter un rembourrage pour le droit de #divContainer de sorte que #div1 ne pas s'asseoir sur le dessus de l'autre enfant divs.

    Est-ce que vous visez?

    merci pour ur réponse,j'ai édité le code CSS.Pourriez vous s'il vous plaît vérifier le code CSS ou de l'exécuter dans le navigateur? le div parent est en train de perdre de sa largeur.
    assurez-vous; avez-vous un lien pour la version éditée? Je suis un peu nouveau pour JSFiddle; je pense que vous pourriez avoir besoin de frapper “enregistrer” ou quelque chose d'après l'édition.
    merci,j'ai eu un coup d'oeil à ur code.pourquoi est-ce que quand je supprime div2,div3 et div4, le divContainer disparaît[son perdre sa largeur].Désolé d'essayer de comprendre comment cela fonctionne.
    ah bien sûr — il ne perd pas de sa largeur, il perd de sa hauteur. L'effet est le même: il disparaît. <div>s obtenir leur hauteur, de leur contenu; s'ils n'ont pas de contenu, ils n'ont pas de hauteur. Lorsque les éléments sont positionnés de façon absolue, ils sont supprimés du document, et ne sont plus considérées comme contenu de leurs parents, pour les fins du calcul de la hauteur. Ainsi, vous pourriez bien être mieux avec Matthieu suggestion de l'utilisation de float à la place.

    OriginalL'auteur Paul D. Waite