CSS: fixed positioning, right: 0px but won't obey max-width

Question

I cannot get positioning, max-width, and 'right: 0px' to work together in harmony! I'm creating a div that is fixed on my site in the upper right corner. The content of the page has a max-width of 1000px, however the label only obeys my rule of 'right: 0px' and sticks to the right, disobeying once max-width has been reached. It should also be noted that by default, the div is in the upper left and obeys the max-width (if I type 'left: 0px;' though, it does not obey the rule and it sticks to the left).

CSS:

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

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

Here are some alternatives that I've already tried:

• width: 100% (with text-align: right) <--- not quite right, and I don't like the 100% width as opposed to 150px
• adding code to position the div "manually" in the html (not CSS)
• I've discovered that float and text-align don't affect to fixed positioning

Help is greatly appreciated! Thank you.

Colo

is the div you are trying to assign a style of max-width empty??,max width, would not be visible if the div is empty. – Marlea

I think your content div is empty. – Overleap

The div is not empty lol, just contains text. See @jayx 's answer cause his is exactly what I needed. – Colo

Other question with some additional info. – Yak

Answer 1

If I understand correctly, this is what you're after.

You need to add a container with an absolute position to get the content over to the right and then use a fixed position container to keep it top right where you need it.

Watershed

This worked perfectly!! Thank you! I have been trying for so long to get it to work. And I got an answer in less than 24 hours! Attention anyone else looking for the same code: I applied Jayx 's code to mine and at first it didn't work, but I noticed that his '.content' contained 'position: relative;' which I then added to mine and it worked. Good rule of thumb if you're making a div with fixed positioning, right:0px; and a site with a max-width: Content is relative, the marker is absolute and the div is fixed. Thank you again! – Colo

Why doesn't this work if the div .marker is instead placed at the bottom, below the text in div .content in the html? – Yak

Answer 2

Alternative if you don't want to add additional absolute container

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

Charming

Answer 3

I got it working with no problem in a jsfiddle. You may want to look around at the CSS that is affecting the area. You may have an issue if #content is not a block level element (no width will be applied and such. More code from you would be greatly helpful so we know exactly what is going on and can help you out more.

Troutman

The problem is not just getting the container in question to stick to the top right, but to stick to the top right of the #content div - expand the window on your fiddle and see how it sticks to the right of the browser window and not #content. – Watershed

Answer 4

I think you need this one:

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

Overleap

Answer 5

position:fixed is not relative to any container. It is relative to the html element of the DOM. That is the reason you're seeing it at extreme right whatever you do to the #content.

Zymase

and..if you can take my advice..please never give 'div' as an ID to any element. – Zymase

instead of position:fixed to #div, set its position to absolute and give its container a position of relative – Zymase