CODEWITHSUNDEEP
cssxhtmlhtml
Casey Flynn
Casey Flynn

Reputation: 14038

Eliminate horizontal scrolling in div in favor of horizontal scrolling in browser window

I have a div, set to 800px wide, that will automatically scroll horizontally if the browser window is resized to < 800px. The behavior I would like, is to have the browser window scroll instead of the div. It would seem simple but for some reason I'm getting hung up on it. Any ideas?

The page in question: http://www.caseyflynn.com/game/

The div CSS:

div#main_container {
    border: 1px solid #FFF;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    padding:0px;
    background-color:#FFF;
    overflow:hidden;
}

The BODY CSS:

html, body {
    background-color:#000;
    border:0px;
    margin:0px;
    padding:0px;
    font-family : Arial, Helvetica, sans-serif;
    font-size : 62.5%;
    overflow:auto;
}

I'm assuming anyone looking at this will have the ability to see the HTML and the CSS. Thanks!

Upvotes: 0

Views: 341

Answers (3)

Casey Flynn
Casey Flynn

Reputation: 14038

Figured it out, I removed both overflow attributes and included an empty div after my floated content with a clear:both property. This caused the browser window to scroll rather than my div and my div to expand around my floated content.

Solution found here: http://ask.metafilter.com/134982/How-can-I-make-a-div-expand-vertically-to-fit-its-floated-content

Upvotes: 0

Bazzz
Bazzz

Reputation: 26922

Remove both overflow attributes, the overflow:hidden from the div and especially the overflow:auto from the HTML element. Then it will do what you want.

Upvotes: 0

Gaurav
Gaurav

Reputation: 12796

Try commenting out overflow: auto; in the body css.

Upvotes: 1

Related Questions