Home/ Questions/Q 4078388
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T17:40:05+00:00

#decoration extend a bit outside of #wrapper. The problem is that if the browser

  • 0

#decoration extend a bit outside of #wrapper. The problem is that if the browser viewport is 910px a vertical scroll bar appears.

How do I make it so that #decoration to not occupy space so the vertical scroll bar do not appear.

EDIT:

Check out this link to see what I want. Just in such a way no vertical scroll bar is there.

http://jsfiddle.net/HLqwN/

Using overflow:hidden will clip part of #decoration so that do not work.

<head>
    <style>
        #wrapper {
            width: 900px;
            position: relative;
        }
        #decoration {
            position: absolute;
            width: 542px;
            height: 126px;
            top: 0;
            left: 660px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <img id="decoration" src="/images/decoration.png" alt="" title="" />
        <div id="content">
            Some content
        </div>
    </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could set overflow: hidden as the other answers are suggesting.

    However, a “decoration” image should not be an <img>, it should be a CSS background-image.

    Like this: 

    #wrapper {
    height: 126px;
    background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}

    See: http://jsfiddle.net/rdSJH/

    • 0