Horizontal scroll on center div

Question

I have a question regarding simple HTML and CSS. First, look at this illustration:

I am making a page with multiple background images, each having the width: 1600px (blue, pink and green on the picture).

The main area of the page (yellow) is centered (margin: 0 auto;) and have the width: 800px.

I want it to be so, that the browser-horizontal-scrollbar only appear, if the browser window is smaller than the center area (800px).

Any ideas how to do this?

Thanks for any help and sorry about the awfull layout and colors ;)

Edit:

What i did so far:

i have tried to make the tyupical center div in wrapper:

<div id="wrap">
  <div id="child">

---

#wrap{ width:1600px; }
#child{ width: 800px; margin: 0 auto;}

However, naturally the scrolls appear as for the entire wrape div, i have no idea what to do from here?

Answer 1

I think is *possible* throw position

As like this

HTML

<div class="one"></div>
<div class="one2"></div>
<div class="one3"></div>

<div class="parent">
Hello i m cente div <br>
Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>
</div>

Css

.one, .one2, .one3{
    height:200px;
}
.one{
    background:red;
}
.one2{
    background:green;
}
.one3{
    background:yellow;
}
.parent{
    background:blue;
    position:absolute;
    width:200px; // width according to your design
    left:50%;
    margin-left:-100px; // according to your width / 2 and define -margin
    top:0;

}

Live Demo

Answer 2

something like this

if ( $(window).width > 800 ){
    $("#thediv").css("overflow-x","hidden");
}
else{
    $("#thediv").css("overflow-x","scroll");
}