Geek Answers Handbook

CSS: fixed positioning, right: 0px, but does not obey max-width

I can't get positioning, max-width and "right: 0px" to work together in harmony! I create a div that is fixed on my site in the upper right corner. The content of the page has a maximum width of 1000 pixels, but the label only obeys my "right: 0px" rule and sticks to the right before reaching the maximum maximum width. It should also be noted that by default the div is in the upper left corner and obeys max-width (if I type "left: 0px;", although it does not obey the rule and it adheres to the left).

CSS

#content { margin: 0 auto; max-width: 1000px; } #div { width: 150px; position: fixed; right: 0px; }

Here are a few alternatives that I have already tried:

  • width: 100% (with text alignment: right) <--- not quite right, and I don't like 100% width, not 150 pixels
  • adding code to place the div "manually" in html (not CSS)
  • I found that float and text-align do not affect fixed positioning

Help is much appreciated! Thanks.

+4
source share
5 answers

If I understood correctly, this is what you need .

You need to add a container with an absolute position to get the contents on the right, and then use a container with a fixed position to keep it in the upper right corner where you need it.

+7
source

I got the job no problem in jsfiddle . You can look around CSS, which affects the area. You may have a problem if #content is not a block level element (without using width, etc. More code from you would be very helpful so that we know exactly what is happening and can help you more.

0
source

I think you need this:

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

position: fixed does not apply to any container. This is relative to the DOM html element. It is for this reason that you see it in the extreme right, no matter what you do C # content.

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

More articles:


All Articles