On my website, I am struggling to position two images at the top of the page on either side of the content. The current temporary solution can be accessed [removed].
If you have a wide enough resolution, you may notice that both red Christmas decorations on the right and left align with the main content. However, the ones on the right do not exit the page flow, causing a horizontal scrollbar to appear when the browser is less than ~1300px wide.
I managed to place the two ornaments by using two absolutely positioned divs with backgrounds within 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>
Despite absolute positioning typically removing elements from the document flow, the second image remains in it, resulting in the appearance of a bottom scrollbar.
Here are the solutions I have attempted:
- Creating an image that combines both ornaments with 910px of empty space between them and using a single absolute div instead of two: encountered the same issue
- Setting the mentioned image as the background for
<html>withno-repeat top center, displaying only one background. This led to having snowflakes on the body background or red ornaments against a solid white background, depending on which element (body or html) had which image as the background. - Placing the image divs inside an absolute div and setting both to relative positions (opposite of the current setup): faced the same issue and did not display correctly on IE8.
I acknowledge that this is a significant issue and complex to comprehend. Despite extensive research, I am running out of ideas. Any suggestions for potential solutions would be greatly appreciated. Additionally, I understand that the code on the linked site needs improvement, but I am just getting started on it, so please refrain from commenting on that aspect :)