Making a Div That Sits Outside the Content Area But Doesn't Cause the Horizontal Scroll Bar to Appear When Browser Window Is Shrunk

Making a div that sits outside the content area but doesn't cause the horizontal scroll bar to appear when browser window is shrunk


<html>
<body style="background:url(bg.jpg) red repeat-y center top">
    <div align="center" width="100%" background="bg.jpg">
        <div style="width:870px;align:center;background:silver" align="center">test</div>
    </div>
<body>
</html>

The image below is small so you need to look closely :)

Sample Image

How do I get rid of the ugly Horizontal Scroll bar in this layout?

You could add the CSS overflow-x:hidden; to your <body> element.

Technique for using a wide background div without affecting body width

Duplicate post: Why do negative margins affect my page width?

However this one explains better what you're trying to accomplish.

This is simple...

Demo: http://jsfiddle.net/wdm954/L3U9c/

<div id="bg">
    <div id="content">
        Here is my content.
    </div>
</div>

#bg {
    background-color: red;
    background-position: top center; /* for images */
}
#content {   
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0px;
    top: 0px;
    width: 200px;
    background-color: #ccc;
}

Make scrollbars only visible when a Div is hovered over?

div {  height: 100px;  width: 50%;  margin: 0 auto;  overflow: hidden;}
div:hover {  overflow-y: scroll;}

<div>  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop    publishing software like Aldus PageMaker including versions of Lorem Ipsum.  </p></div>

javascript Y scroll-bar moving on mouse of downbutton but the window goes horizontal

He basically uses a onscroll event handler in which he detects the y value (scrollHeight) and sets/moves/displays/hides/etc objects on specific y values. The page is just scrolling down, but the elements are moved in. So it looks like horizontal scrolling, but it's not. It's elements moving from right to left, etc.

(A lot of (very fine!) work by the author.) Have a closer look at:

window.onscroll = function (e)
{
    if (canScrollOrSwipe == true) //to avoid user swipe when window is still resizing after screen orientation changed on table
    {
        detectPageVerticalPosition();
        runTheseFunctionsAfterScrollOrSwipe();
    }
}

And the functions called there.

Or better yet: contact this webdesigner himself before copying :)

Dropdown rendering outside page and not closing when window width increases

I just realized what's going on.

When you're outside of the input/dropdown, the dropdown is still rendered, but given a left of -9000px.

My browser width is currently about 9400 px.

Still don't actually know why it's not closing, though.

EDIT: edited the src to use show/hide instead of left and it works now....

Why does my horizontal navigation bar take the space of the content area?

If you want #navigation to display as float, you may add clear:both to your #content.

#content {
   background: #EBF7FF;
   width: 1024px;
   height:768px;       
   text-align: justify;
   clear:both;
}

But to my mind better solution would be displaying it as block and li as inline-block or display it as table and li as table-cell

Making a Div That Sits Outside the Content Area But Doesn't Cause the Horizontal Scroll Bar to Appear When Browser Window Is Shrunk