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.