CODEWITHSUNDEEP
htmlcss
Biker John
Biker John

Reputation: 2711

Position:absolute causes horizontal scrollbar

Absolutely positioned (side yellow advertisements) div's cause unwanted horizontal scrollbar when window is resized (size decreased) beyond them. Scrollbar should appear only when window is smaller than main #container and these advertisement div's should not affect the layout. It doesnt matter if they get covered.

HTML:

<div id='topbar'>
    <div id='menu'> <a href='#'>Link1</a>
 <a href='#'>Link2</a>
 <a href='#'>Link3</a>
 <a href='#'>Link4</a>

    </div>
</div>
<div id='container'>
    <div id='pushfix'></div>
    <div id='ad_container'>
        <div id='ad1'>ad</div>
        <div id='ad2'>ad</div>
    </div>
Lorem ipsum placeholder text
</div>

CSS:

body, html {
    height:100%;
}
body {
    margin:0;
}
#topbar {
    width:100%;
    background-color:#DCDCDC;
    height:40px;
    position:absolute;
}
#menu {
    width:250px;
    background-color:#B3B3B3;
    margin:0 auto;
    height:100%;
    text-align:center;
    line-height:40px;
}
#menu a {
    color:#fff;
}
#container {
    height:100%;
    background-color:#808080;
    width:240px;
    padding:0 5px;
    margin:0 auto;
}
#pushfix {
    height:40px;
}
#ad_container {
    position:relative;
    width:240px;
}
#ad_container div {
    width:100px;
    background-color:yellow;
    height:300px;
    position:absolute;
}
#ad1 {
    left:-105px;
}
#ad2 {
    right:-105px;
}

Exact layout replica: http://jsfiddle.net/8UkQA/

Upvotes: 56

Views: 59604

Answers (4)

CHANDU
CHANDU

Reputation: 3

// need to disable AutoScroll first, otherwise disabling the horizontal scrollbar doesn't work

flowLayoutPanel.AutoScroll = false;

// disable horizontal scrollbar

flowLayoutPanel.HorizontalScroll.Enabled = false;

// restore AutoScroll 

flowLayoutPanel.AutoScroll = true;

Hope this will resolve your issue.

Upvotes: -5

meadowstream
meadowstream

Reputation: 4141

You need to give the child coordinates a.k.a. top: 0; left: 0;

Upvotes: 9

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13928

I may like to further add, if the same problem is being faced and by using the solution suggested by @Aaron the page seems to not scroll then you can use axis specific version of the "overflow" attribute, as following,

overflow-x: hidden;

This will only hide the content protruding on the right hand side (or left hand side if website is RTL) and not the vertical content.

Also to further enhance this method if the protruding content is appearing only at a certain resolution (as in my case), you can use css media query to restrict the behaviour.

@media (min-width: 1500px) {
    body {
        overflow-x: hidden;
    }
}

Upvotes: 17

Aaron
Aaron

Reputation: 5227

Absolutely-positioned elements that expand beyond the boundaries of the body seem to cause scrollbars to appear, for some reason. You can remedy this by simply wrapping everything inside the body tag in a relatively-positioned div styled with overflow: hidden;. The absolutely positioned content that expands beyond the boundaries of this container won't cause scrollbars on the window.

Here's a working example: http://jsfiddle.net/8UkQA/1/

Upvotes: 76

Related Questions