CODEWITHSUNDEEP
cssbackgroundscrollbar
raveren
raveren

Reputation: 18541

Problem with background elements around main content

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:

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 :)

Upvotes: 1

Views: 190

Answers (2)

raveren
raveren

Reputation: 18541

The solution in the end was to create a div that opens right after body and encases all content, closing right before body does. The style of the div:

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

The png itself is the two decorations I wanted to be on each side of the body. Both pictures were pasted into one with a 910px empty gap between - the exact width of the body.

No scrollbar, crossbrowser, stylish.

Upvotes: 1

Orson
Orson

Reputation: 15441

try setting this div (#alignmen) with:

overflow: hidden;

Update:

<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>

Upvotes: 0

Related Questions