Home/ Questions/Q 8042295
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T04:31:45+00:00

I am working on a bit basic webpage layout. Problem is that browser DOESN’T

  • 0

I am working on a bit basic webpage layout. Problem is that browser DOESN’T ignore element overflowing from wrapper and add horzinotal scroller if screen is closer than 1050px (1050px is width of wrapper). Check out code:

HTML 

<body>
    <div id="wrapperMain">
        <div id="headerLeftOverflow"></div>            
        <div id="headerRightOverflow"></div>
        <div id="headerMain"></div>
    </div>
</body>

CSS

body {    
    margin: 0;
    padding: 0;
    background-color: #f9eacc;
    text-align: center;
    font-family: Tahoma , sans-serif;
    color: #333333;

}

div#wrapperMain {
   width:  1050px;
   margin: auto;
   position: relative;
   height: 800px;
}

div#headerMain {
    position: absolute;
    top: 0;
    left: 0;
    width: 1050px;
    height: 565px;
    background-image: url("../images/header.png");
    background-repeat: no-repeat;
}

div#headerLeftOverflow {
    position: absolute;
    width: 271px;
    height: 565px;
    background-image: url("../images/headerLeftOverflow.png");
    top: 0;
    left: -271px;    
}

div#headerRightOverflow {
    position: absolute;
    width: 277px;
    height: 565px;
    background-image: url("../images/headerRightOverflow.png");
    top: 0;
    left: 1050px;   
}

Dont get me wrong.

I want div with id “headerRightOverflow” visible if screen is enoguht wide. Strange is that div with id “headerLeftOverflow” works properly (if screen is closer than 1050 px, div is hidden).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want to quick solution that will make scrollbar disapper – add

    body{overflow-x: hidden;}

    BUT, I think you should simply write your code diffrently, without position: absolute.

    • 0