We help IT Professionals succeed at work.

Scrolling DIV

apparition asked
Medium Priority
Last Modified: 2010-04-09
Please take a look at this page

I am trying to separate the Month section (Jan, Feb, March) so it is the only
part that scrolls sideways not the whole page. Could someone please help
me figure this out.

Watch Question


P.S. I dont want to use frames since all the data needs to be in the same form.
The first thing that comes to mind is the following:

<div id="main" style="width: 800px;">
Here's the main body of the page

<div style="overflow: visible;">
Here's the stuff you want to scroll


It's clean, understandable, a perfect application of valid CSS applied to valid markup, and completely tanks in MSIE.  ::shrug:: We can't have everything.

(There may be a way of tricking MSIE into doing this; I don't know off the top of my head, but this may be a starting point.)
Sorry, it would be nice if I thought a little before posting.  "overflow: scroll;" makes a whole lot more sense than "visible"


I need it to work in IE......plus It be helpful if someone could show me how modify my existing code to achieve this....

Here's what I'd recommend; I've tested this on Firefox 1.5 and MSIE 6.0.  I took out all the tables you were using for layout, which make it excessively painful to style, and replaced them with valid CSS.

<style type="text/css">
, #managers {
      width: 900px;

#header {
background-color: white;
background-image: url(index_new_files/title.gif);
height: 45px;
background-repeat: no-repeat;

#managers {
background: #a5bec6;
text-align: right;

ul#views {
      float: right;
      clear: both;
      padding: 0;
ul#views li {
      list-style: none;
      float: left;
      border: 1px solid black;
      padding: 0;
      margin: 0;
      background: white;
ul#views li.active {
      background: gray;



<div id="managers">
      <select id="Select7" class="input1" disabled="disabled">
      <option selected="selected">Joe Smith</option>

<div id="header"></div>

<ul id="views">
      <li><a class="link2" href="http://ca.geocities.com/malik_arefin@rogers.com/test/month.html">Monthly</a></li>
      <li class="active"><a class="link2" href="http://ca.geocities.com/malik_arefin@rogers.com/test/qtr.html">Qtrly</a></li>

<br style="clear: both;" />

<table style="overflow: scroll;">

<!-- big scary table of data here -->




but I am not sure if this is going to accomplish what I want to do.

I want to split the main table so only the months section is scrollable but the other items to the left stay static.
Ahhh; ok.  In that case I might suggest breaking it into two tables:

<table style="float: left;">
<!-- stuff you don't want to scroll.

<table style="float: left; overflow: scroll;">
<!-- stuff you do want to scroll -->

<br style="clear: both;" />

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
If the B grade indicates you were hoping for more information I hope you'll ask!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.