0

I have a basic 2-column layout with divs using the following html code:

    <div ID="main">
        <!-- body content -->
    </div>
    <div ID="sidepanel">
        <!-- side content -->
    </div>

and the following css code:

#main{
    width:80%;
    float:left;
    overflow:hidden
}
#sidepanel{
    width:18%;
    float:right;
    overflow:hidden
}

While the columns are done nicely for the most part, I have one problem. If my main content requires more than 80% of the screen width to be properly displayed, the remaining width is then clipped off. If I remove both overflow:hidden items, then the side panel content overlaps the body content. The only way I can see everything properly in either case is to use the web browser zoom out feature or increase screen resolution.

With tables, I can simply use this setup with no CSS:

<table>
<tr>
<td>
<!-- body content -->
</td>
<td>
<!-- side content -->
</td>
</tr>
</table>

and everything works fine.

Overall, I'd like a horizontal scrollbar available instead of clipping if the content in the main body is too wide for the screen.

Anyone know how to fix this while still making it compatible with IE7 without having to resort to tables for layout?

Mike -- No longer here
  • 2,064
  • 1
  • 15
  • 37

1 Answers1

0
#main{
    width:80%;
    float:left;
    overflow: scroll;
}

Or if you want to ensure that there is only a horizontal scrollbar, as overflow alone does it for both horizontal and vertical scrolling:

    overflow-x: scroll;

As far as I know, overflow-x was supported in IE7, so you should be good to go with this.

unpollito
  • 937
  • 1
  • 11
  • 30
  • The answer does help with me thus far, but now I feel I need a horizontal scrollbar at the top too because the main part of the document is at the top and it would be a pain scrolling to the bottom of the screen just to use a horizontal scrollbar. – Mike -- No longer here Oct 26 '15 at 23:52
  • https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table has several approaches. However, for some reason the first option does not work for me, but there are jQuery plugins for achieving that. Would that work? – unpollito Oct 27 '15 at 00:00
  • I don't want to resort to jquery. I feel like I'm 0.5% of web developers that want to please as many web browsers as possible including older ones that aren't capable of processing jquery or even running jsfiddle. – Mike -- No longer here Oct 27 '15 at 00:11