Question

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!

Answer 1

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