CSS: correction du positionnement, à droite: 0px mais ne pas obéir max-width

Je ne peux pas obtenir de positionnement, max-width, et "right: 0px" à travailler ensemble dans l'harmonie! Je crée un div qui est fixé sur mon site dans le coin supérieur droit. Le contenu de la page a un max de largeur de 1000px, cependant le label obéit à ma règle de droit: 0px " et bâtons pour le droit, la désobéissance, une fois max-width a été atteint. Il convient également de noter que, par défaut, la balise div dans le coin supérieur gauche et obéit au max-width (si je tape 'left: 0px; cependant, il n'obéit pas à la règle et il se colle à gauche).

CSS:

#content {
margin: 0 auto;
max-width: 1000px; }

#div {
width: 150px;
position: fixed;
right: 0px; }

Voici quelques solutions de rechange que j'ai déjà essayé:

  • width: 100% (avec text-align: right) <--- pas tout à fait raison, et je n'aime pas les 100% de largeur, par opposition à 150px
  • ajouter du code à la position de la div "manuellement" dans le html (pas de CSS)
  • J'ai découvert que le flotteur et le text-align n'affectent pas de correction du positionnement

Aide est grandement appréciée! Merci.

pourriez-vous créer un jsfiddle?
est la div vous essayez d'affecter un style de max-width vide??,largeur max, ne serait pas visible si la div est vide.
Je pense que votre content div est vide.
Le div n'est pas vide lol, juste contient du texte. Voir @jayx 's réponse la cause de son est exactement ce dont j'avais besoin.
D'autres question avec quelques informations supplémentaires.

OriginalL'auteur Emily Ryder | 2012-07-13

  1. 9

    Si je comprends bien, c'est ce que vous êtes après.

    Vous avez besoin d'ajouter un conteneur avec une position absolue pour obtenir le contenu sur la droite et ensuite utiliser une position fixe conteneur pour le garder en haut à droite où vous en avez besoin.

    Cela a parfaitement fonctionné!! Merci!!!! J'ai essayé pendant si longtemps pour le faire fonctionner. Et j'ai obtenu une réponse en moins de 24 heures! Attention à quiconque cherche pour le même code: j'ai appliqué Jayx du code de la mine et au début, ça ne marchait pas, mais j'ai remarqué que son".contenu' " position: relative;' que j'ai ensuite ajouté à la mienne et cela a fonctionné. Règle générale, si vous faites un div avec la correction du positionnement, right:0px; un site avec un max-width: Contenu est relatif, le marqueur est absolue et la div est fixe. Merci encore!
    Pourquoi n'est-ce pas fonctionner si la div .marker est plutôt placé en bas, en dessous du texte dans le div .content dans le code html?

    OriginalL'auteur Jayx

  2. 2

    Alternative si vous ne voulez pas ajouter de l'absolu conteneur

    #div {
  width: 150px;
  position: fixed;
  right: calc(50% - 500px); /* will move the div as far as 50% of viewport
  then move it back to 500px (that is half of max-width) */
}

/* if needed, you can add media query */
@media (max-width: 1000px) {
  right: 0;
}

    OriginalL'auteur Fatma Nabilla

  3. 0

    Je l'ai eu à travailler sans problème dans un jsfiddle. Vous pouvez regarder le CSS qui affecte la région. Vous avez peut être un problème si #de contenu n'est pas un élément de niveau bloc (pas de largeur sera appliquée. Plus de code de votre part serait grandement utile, donc nous savons exactement ce qui se passe et peuvent vous aider plus.

    Le problème n'est pas seulement faire le conteneur en question à coller en haut à droite, mais à coller en haut à droite de l' #div du contenu - agrandissez la fenêtre de votre violon et de voir comment elle s'en tient à la droite de la fenêtre du navigateur et pas de #contenu.

    OriginalL'auteur AlexM

  4. 0

    Je pense que vous avez besoin de celui-ci:

    #content {
  margin: 0 auto;
  max-width: 1000px; 
  height:20px;
  background:yellow;
  position: relative;
}
#div {
  width: 150px;
  position: absolute;
  right: 0px;
}

    OriginalL'auteur RAN

  5. 0

    position:fixe n'est pas par rapport à un conteneur. C'est par rapport à l'élément html de la DOM. C'est la raison pour laquelle vous êtes le voir à l'extrême droite, ce que vous faites dans le #contenu.

    et..si vous pouvez prendre mes conseils..s'il vous plaît ne donnez jamais 'div', comme un ID pour chaque élément.
    au lieu de la position:fixe à #div, de définir sa position à absolu et de donner son conteneur en position de relative

    OriginalL'auteur AdityaSaxena