Geek Answers Handbook

Absolute positioning: one element expands the window, another element does not affect it. Both use the same code: C

I added two divs for storing background images for decorative purposes - at the request of the artist who works with me on the website.

At first it worked very well. Images should be displayed on each side of the wrapper div containing the content of the website, without affecting the width of the page.

Then the organization that owns the website received another sponsor, whom I had to add in the column on the right. I created a new identifier for the 5th "button" and created a div for it. By downloading it, I noticed that a scroll bar suddenly appeared at the bottom of the page, for no apparent reason.

At first I suspected that the button was a problem, but in the end I found out that the right-most decorative div was bending the page width, despite the fact that it used absolute positioning. Both of the sections use the same code, only for mirrors on the left and right. I do not know what causes the problem.

(You can see the problem in action as long as it lasts at www.torucon.no/no/)

Please help me! Here is the CSS for both divs:

#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}

#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}

Here is an HTML snippet showing HTML divs:

<div class="wrapper"> <!-- Contains the entire website for structure --> 
<div id="wolf">
</div>
<div id="lion">
</div>

((In case you didn’t get this: the wrapper should be centered, but it is. But when I resize the window, I found that the scroll bar appears long before the contents of the wrapper are even close to the border of the browser window. This will annoy computers with low resolution or small screens!))

+5
2

, , , , . ?

, , , .

, , , - , , .

+2

, http://www.torucon.no/no/, , , ?

<body>
 <div class="overlay">
     <div class="wrapper">
     </div>
 </div>
</body>


<style>
  body{width:100%; background:---;}
 .overlay{width:100%; background:---;}
<style>
0

More articles:


All Articles