主要内容周围的背景元素存在问题

Question

我有一个网站，我需要在页面顶部内容的每一侧放置两个图像。暂时可以到达[删除]。

如果您的分辨率足够宽，您可以看到左右红色圣诞装饰品都与主要内容对齐。然而，如果浏览器宽度小于~1300px，正确的滚动条不会从页面流中取出并创建水平滚动条。

我通过将两个带有背景的绝对定位的 div 放入相对定位的 div 中来实现这两个装饰：

<div id="alignment"> <!-- position:relative -->
 <div></div> <!-- first image: position:absolute;right:-210px -->
 <div></div> <!-- second one: position:absolute;right:915px -->
</div>

虽然绝对定位的元素应该从文档流中取出，但第二个图像不是:( 因此，出现了底部滚动条。

我尝试了什么：

• 制作两个装饰品的图像，间隔 910 像素（内容的宽度），并仅使用一个绝对 div 而不是两个：同样的问题，
• 将上述图像添加为无重复顶部中心 的背景，导致仅显示一个背景。body bg 上有雪花，或者纯白色背景上有红色装饰品。取决于两个（body 或 html）元素中哪一个具有哪个图像作为背景，
• 将图像 div 放置在绝对 div 中并使两个相对（与当前情况相反） - 相同的问题并且不会显示在 <IE8

我知道这是一个大问题并且很难理解，对此我深表歉意。我研究了很多，但没有想法。任何可能的尝试解决方案将不胜感激。另外，我意识到我链接到的网站的编码处于糟糕的边缘，但我刚刚开始研究它，所以对此没有评论，请:)

Answer 1

最终的解决方案是创建一个 div，它在 body 之后立即打开并包含所有 内容，并在 body 之前关闭。 div的样式：

background: url('/client/images/xmas-burbulai.png') no-repeat top center;

png本身就是我想要在body两侧的两个装饰。两张图片都被粘贴到一张图片中，中间有 910 像素的空白 - 正好是身体的宽度。

无滚动条，跨浏览器，时尚。

Answer 2

尝试设置这个div（#alignmen）：

overflow：hidden;

更新：

<div id="main"> //Position this relatively
   <div> //Positon this absolutely, this height should be the max of the two floated divs
     //In here 
     <div>Left</div>//Float Left
     <div>Right</div>//Float Right
   </div>
<div>