JTeagle

just to point out if you use below, without left:0; and you had not zeroed the margins of the body, because the body has by default about a 10px margin, it would appear 20px from left edge. #fixtop { position:fixed; top:0; right:0; margin:10px; /*with or without margin your choice*/} by setting left:0; you force it with margin applied to start from the browser left edge, that is why you should use at least left and top properties, and the rest if required.

Yes, that is very similar to what I hit with one of the items in the original attached HTML file; I was setting margins to 0 and wondering why I was getting offsets; but I had not set left and top, so it was anybody's guess. Consider that a lesson learned. It's a relief to know I won't have to resort to a fixed content width.

This one's easy:

#fixed_right {  position: fixed;  /*width and height*/  right: 0px;  top: 0px;}

This will fix the element to the top right corner of the browser window. If the window is resized, it will remain in the top right corner.

Agreed. (And yes, I meant margin, not border; slip of the tongue.) The problem was that I had started to think of margin-right and its counterparts as being on the *outside* of the element, thus being used to position it (because of the business of width being just the width of the content, and margin-left:auto / margin-right:auto centering horizontally); once I realised my mistake and corrected that, suddenly things worked. I did say right from the start that I accepted *I* might be the problem {:v) I still think auto could be more intelligent, but since there are other ways to achieve things it really doesn't matter. So no, CSS isn't broken, my brain was.

margin-left: auto; does not, or ever forced a block element to the right, only when used together with margin-right: auto; it will centre the element horizontal, but if either side is substituted with any value other than auto, it breaks, and returns to 0 value, and the other-side takes on the measurement assigned to it.

(Funny you should use the word 'breaks' - kind of my point, isn't it?) I consider that a failing, if we're going to say it's not a bug. If you supply a margin-right value, and a fixed div width, then margin-left:auto should be perfectly capable of calculating the remaining space of the current window and pushing the div to the right side.

and if margins are used the edge of this element is forced inward away from browser viewport window edges.

No - that's one of the problems, as the samples showed. It does not obey margin-right when you use width:100%.

When using positioning, the very least you should use is one vertical property, along with a horizontal property, usually top and left.

If you're trying to position a div relative to the left / top edge of the window, then left: and top: would work; so should margin-left: and margin-top:. My issue is more with margin-right: on a page that wants to adapt to any browser width (rather than use a fixed content width), you can't use left: for a right-anchored div - so you should be able to use margin-right: to inset it from the right edge instead. That's what seems to be not working for fixed-position divs.

I've been having some problems with getting what I wanted out of divs, and I am forced to come to the conclusion that CSS is broken. I've attached an HTML file to demonstrate the problems - you will need to edit its source HTML and follow the instructions to see the problems. I fully accept that *I* may be the problem rather than CSS, and at least all major browsers are suffering the same problem, but I really feel that CSS is at fault here and I was wondering what others thought? One challenge is to get a box to fit within the browser window (no scrolling required) with a 10 pixel border *all* around (no matter what size the browser window becomes), and another challenge is to get a fixed-width box to anchor itself to the right side of the browser window so that it is unaffected by scrolling (i.e., fixed positioning). In neither case are you allowed to use tables, and for the right-anchored box you're not allowed to use a fixed left position / margin (in other words, changing the width of the browser should keep the box anchored to the right). (This is not homework, BTW, I left school / college / university years ago! It's just what caused me to write this post.)

css_issues.html