On the following website:
http://tinyurl.com/cyuvh65

I have an absolutely positioned element with a negative right margin so that it extends out of the side of the containing elements:

#banner-disc {
    background: url('../image/banner-disc.gif');
    width: 846px;
    height: 270px;
    position: absolute;
    right: 0;
    top: 0;
    clear: both;
    z-index: 0;
    margin-right: -100px;
}

I've attached a screenshot showing the element in question.

It's creating two problems, one being if I resize my browser to 1024 pixels wide a horizontal scrollbar appears. I didn't expect this seeing as the element is absolutely positioned?

Secondly, I cannot add overflow:hidden to my #wrapper element in order for the 50px of bottom padding on the body element to work. If I do this, the side of #banner-disc is chopped off.

Is the only way I can clear it is to add a br.clear style before the closing tag for #wrapper?

clear will not work on absolute elements as they are not in the normal flow so cannot affect elements that are in the flow or floated.
Also from http://www.w3.org/TR/CSS2/visuren.html

Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 and CSS 2.1 the 'clear' property only applies to block-level elements. Therefore authors should only use this property on block-level elements. If an implementation does support clear on inline elements, rather than setting a clearance as explained above, the implementation should force a break and effectively insert one or more empty line boxes (or shifting the new line box downward as described in section 9.5) to move the top of the cleared inline's line box to below the respective floating box(es).

spans are inline elements and do not take width or height either.

Thanks, but I don't believe it's the span that I need to clear?

I need to clear something in order for the bottom padding to display on the body element. I imagine I could just add a <br style="clear" /> before the ending #wrapper </div>

Because if I add overflow:hidden to #wrapper then the body padding shows up but it chops off half of the absolutely positioned span

But then there's also the issue of the horizontal scrollbar appearing when the viewport is 1024 pixels wide :/

but I don't believe it's the span that I need to clear?

Maybe, but you do have the CSS rules above applied to a span

<span id="banner-disc"></span>

But then there's also the issue of the horizontal scrollbar appearing when the viewport is 1024 pixels wide

In what browser does this happen with?
I don't get a horizontal scroll in any browser I tried?

Originally Posted by chrishirst

In what browser does this happen with?
I don't get a horizontal scroll in any browser I tried?

All of them! In both Windows and Mac. But I have a feeling I may have hidden the <span> with display:none; when you'd be looking. I've made it visible again now

Ok see it now.

By the way, did I mention how much I dislike these stupid "grid systems" with the ridiculous fractional numbers for padding and margins?????

There's no [insert expletive of choice] wonder that the screw things up badly when it goes slightly wrong.

Why does it have to be absolute and using margins to push it "outside of the container"? is there some problem with using relative position and the left/right properties, it would be far less messy and less problematic because the natural flow can remain in place.

Originally Posted by chrishirst

Why does it have to be absolute and using margins to push it "outside of the container"? is there some problem with using relative position and the left/right properties, it would be far less messy and less problematic because the natural flow can remain in place.

That's how it SHOULD be coded. It should always work with the natural flow. Don't even use relative positioning, learn floats for crying out loud!

Hmmm I'm unsure how I could get it working by applying relative positioning to #banner-disc sorry?

If I set the rules like so:

#banner-disc {
    background: url('../image/banner-disc.gif');
    width: 846px;
    height: 270px;
    float: right;
    position: relative;
    left: 100px;
    top: 0;
    clear: both;
    z-index: 0;
    display: block;
}

Then the element is knocked beneath the other immediate children of #banner-home (see attached image)

I'm guessing I've got the wrong idea though!

a z-index of 0 means that it is at the bottom of the stacking order therefore is BELOW all other elements.

http://webmaster-talk.eu/en/articles...ss-positioning

z-index is the third dimension of positioning, imagine it as a tower block and relative positioning is what creates the floor offset that is on the Manchester Hilton (Beetham Tower) the building "flow" is not disturbed on the opposite side and in the floors below (lower stacking order) but everything above (a higher stacking order) follows the new flow in the offset direction.
http://examples.webmaster-talk.eu/ch...ning/relative/

It's not exactly like that but it a pretty big and close example of how it works.

Hmmm, I've modified the CSS like so:

#banner-disc {
    background: url("../image/banner-disc.gif") repeat scroll 0 0 transparent;
    bottom: 270px;
    clear: both;
    display: block;
    float: right;
    height: 270px;
    position: relative;
    left: 100px;
    width: 846px;
    z-index: 0;
}

However I'm still getting a horizontal scrollbar at a 1024px resolution :/

lose the display: block;

Hmmm, I've set it to display:inline (to overwrite the display: none; in the other stylesheet) however the problem still persists

Turns out it's more common than I thought:
http://stackoverflow.com/questions/6...hich-is-outsid

Adding left:-100px is fine but browsers don't seem to like it on the right!?