Horizontal scroll on center div

Question

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

enter image description here

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?

Explain what you did and where you got stuck right now? Post your efforts here. — Mr_Green, Mar 29 '13 at 09:35

btevfik · Answer 1 · 2013-03-29T09:45:37.233

1

something like this

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

edited Mar 29 '13 at 09:45

answered Mar 29 '13 at 09:41

btevfik

3,391
3
27
39

@BeerFunding i actually changed it a bit. i was mixing jquery with javascript. i think this should work. you can do it with `@media screen and` as well – btevfik Mar 29 '13 at 09:47
@he has got a much simpler solution. but if you want to actually show a scrollbar that is inside the center div i think you might need to do the method i posted – btevfik Mar 29 '13 at 09:55
i just tried your solution as well, it works as well. The css however, got better in with the rest of the code that i allready did. – Hans Preutz Mar 29 '13 at 10:01

score 1 · Accepted Answer · answered Mar 29 '13 at 09:46

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

Horizontal scroll on center div

2 Answers2