Question

I am trying to make content div show a horzontial scroll bar once the page becomes too narrow for the content inside of the content div. Currently, my setup is as follows:

HTML:

<div id="LeftNavigation">
    <div id="TopNav">Menu1</div>
    <div id="BottomNav">Menu2</div>
</div>
<div id="ContentContainer">
    <div style="float: left; width: 500px">Content1</div>
    <div style="float: left;">Content2</div>
<div>

CSS:

#LeftNavigation {
    float: left;
}

#TopNav,
#BottomNav {
    width: 165px;
}

#ContentContainer {
    margin-left: 180px;
    min-height: 150px;
    padding: 10px;
}

I’d like to have my page work like the image below. Where my content container has a minimum width of say…600 pixels and then when the page width gets below the combined width of the menu and content(including margins), a scroll bar shows up. I can’t figure out how to get this to work properly, though. My ContentContainer div keeps wrapping below my LeftNavigation div whenever the page becomes too narrow. Thanks in advance.

Answer 1

You need to add a size to ContentContainer and add overflow-x:auto. The scroll bar will show up on ContentContainer, not the entire page as you illustrate.

If you want it where shown in the diagram you’ll need to make a fake scrollbar and use JavaScript to make it work.