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.

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.