[mathias]

With an established content width, how does one hang a graphic off one side without the browser counting it as content and therefore cause scrolling?

An example: Your site has a centered fixed width and is X wide, all content fitting neatly within. Your nav is top left, each item being preceded by a transparent icon. Each of these little nav icons hang a little offset to the left, slighty out of the established content area.
The problem is that your browser is by default counting them as content and causing horizontal scrolling, instead of treating them as if they're a background element, like you need it to.

[pgo]

background-attachment: fixed;

[mathias]

Viewing the attachment, you can see the top left portion of the site. The black/white vertical line is the boundary of the content area, the red box indicates the bounds of the PNG I'm hanging off the side a little bit.

Using absolute positioning, I can put the PNG anywhere with no scrolling. I don't like using AP when I don't have to, though.

PGO, the background method won't work for this, but I did do something similar to pull off the top aligned header, slicing it where it meets the content boundary and using the pixels outside that in a background image set below it, then I created another div below that with a 4px wide gradient bar which I then tiled across the top.


Is there not a way to avoid using AP to accomplish this?

[pgo]

You could try negative margins, but negative margins don't work on floated elements in IE6, so you might as well use absolute positioning.

[mathias]

When you say floated, do you mean elements with an actual Float: property or stuff that's simply positioned outside it's container?

[cgl]

Why wouldn't pgo's first answer work - a background image attached to the body? And why do you want to avoid absolute positioning?

[mathias]

@cgl: The graphic is a transparent png that sits on top of everything. I could probably re-structure it a little and use all flat graphics, not layered, but I need to figure these types of things out. I've been attempting to code my own pages now for less than two weeks, I have a heck of a lot to figure out. I'm already on the brink of going postal on the W3C, or maybe just IE's dev team, whoever crosses my path first.

Well, after developing the page further I've had to resort to moving the <img> tag for the transparent icons to almost the top of the code under the main content div and use absolute positioning, giving it like a top: 440px, with a higher z-index, a ridiculous solution. Until I did that though, FF and IE were placing it on the page differently.
But what really forced me into doing that was more complications caused by having 3 nested divs now inside the div it used to be in to accomplish vertically centered text.