I have this site where I need to place two images at the top of the page on each side of the content. Temporarily it can be reached [removed].
If your resolution is wide enough you can see both right and left red Christmas decorations are aligned to the main content. However the right ones are not taken out of the page flow and create a horizontal scrollbar if the browser is smaller than ~1300px across.
I achieved the two ornaments by placing two absolutely positioned divs with backgrounds into a relatively positioned div:
<div id="alignment"> <!-- position:relative -->
<div></div> <!-- first image: position:absolute;right:-210px -->
<div></div> <!-- second one: position:absolute;right:915px -->
</div>
Although absolutely positioned elements should be taken out of the document flow, the second image isn't :( Thus, the bottom scrollbar appears.
What I tried:
- making an image of both ornaments with 910px (the width of the content) of empty space apart and using only one absolute div instead of two: same issue
- adding the aforementioned image to be the
no-repeat top centerbackground of<html>which resulted in only one background showing. Either I have the snowflakes on thebodybg or the red ornaments over a solid white background. The latter depends on which of the two (body or html) elements have which image as the background. - placing image divs in an absolute div and making the two relative (opposite of current situation) - same issue AND does not display on
<IE8
I know and am sorry for this is a big issue and hard to understand. I researched a lot and am out of ideas. Any possible solution to try out would be greatly appreciated. Also, I realize the coding of the site i linked to is on the verge of terrible, but I have just started working on it, so no comments on that, please :)