image outside of content flow

In the example web page, there is a presentational image to the left of the content halfway down the page. The result is that the image is visible to the left of the content, but does not cause a horizontal scrollbar when it is partially clipped. The css for the element is as follows:

#extraDiv1{
  width: 102px;
  height: 235px;
  position: absolute;
  left: 50%;
  margin-left: -351px;
  top: 520px;
  background-image: url(z-left2.gif);
}

I would like to accomplish the same effect, only to the right of the content instead of the left. However, using firebug to test the following css causes a scrollbar to appear when the image is partially clipped:

#extraDiv1{
  width: 102px;
  height: 235px;
  position: absolute;
  right: 50%;
  margin-right: -343px;
  top: 520px;
  background-image: url(z-left2.gif);
}

How can I achieve the same effect on the right side of the content?

notes

The following are requirements for my solution, (although not necessary for a general solution which could still be useful.)

  • Absolute Positioning - Fixed Positioning solves the scrollbar problem, but does not fit my design
  • Right Side - The image must be on the right side of the content
  • Centered - The content must be centered (margin: 0 auto;)
  • Scroll Bars - Scroll bars must not appear when the presentational image is clipped

[update]

As suggested by Tony Crockford below, the page width could be increased to accommodate the extra image. However, I would like to keep the image outside of the content, making the scrollbar available only if the content is out of view, not just the image.

My apologies for the downvote. It wasn't personal, the answer just didn't fit my problem.

5 answers

0
points

Your page appears to be fixed-width. So I would do it with a Body background-image as Tony suggests. Create an image file with whatever decoration you desire on both sides and a blank space the width of your content column down the middle. You can position it "top center" or "center center" and it should work as desired. Just make sure that the blank column is in the geometric middle of the image file. No extra presentational divs required!

Answered over 7 years ago by Alex Taylor
0
points

The scroll bar appears because the container div isn't wide enough for the extra width of the image.

currently it's 500px, so a scroll bar appears when the browser window falls below that.

if you're adding extra pixels to the right, you need to widen the container div accordingly.

try:

#container{
margin-left: auto;
margin-right: auto;
width: 600px;
}
Answered over 7 years ago by Tony Crockford
0
points

This is a big question, perhaps the original poster would explain why making the container wider, to accommodate the image and avoid the scrollbar didn't work?

or are people just marking answers down for the fun of it?

Answered over 7 years ago by Tony Crockford
0
points

For your purpose the image would have to be on the body background, or in a container without a width.

the scrollbar appears when the browser window meets a fixed width.

you could constrain the width of the content and allow the image container unrestricted width.

it needs some experimentation, but I'm out of time at the moment, or I'd play with the css.

hope this helps?

Answered over 7 years ago by Tony Crockford
0
points

Why not create 4 Divs?

Header

Left Image || Column 1 || Column 2 || Right Image

Footer

Answered over 7 years ago by Paul@Rezolution