web page, left navigation <td> with scolling center-content <td>

What html code do I use to create the left-navigation with scrolling-center-content functionality in a web page.  I have illustrated what I am looking for below using a <table> but it just makes one, big, unified web page.  Thanks.

<table>
  <tr><td colspan=2>This is my header cell</td></tr>
  <tr>
     <td> This is my left-navigation cell  </td>
     <td>  center-content cell.  This should scroll independently, of left-nav and header  /<td>
   </tr>  
</table>
pdschullerAsked:
Who is Participating?
 
alexpercsiConnect With a Mentor Commented:
you can always force the page scrollbar to disappear. try adding style="overflow:hidden" to the body tag and see if it helps.
0
 
alexpercsiCommented:
When you want something to scroll you need to put its content in a div tag, set a fixed width and/or height
on the div tag, and set the overflow property depending on how you want to display the scrollbars.

Read more about the overflow CSS property here:
http://www.w3schools.com/Css/pr_pos_overflow.asp

In your code you could do it like this:
<table>
  <tr><td colspan=2>This is my header cell</td></tr>
  <tr>
     <td> This is my left-navigation cell  </td>
     <td>
         <div style="width:500px;height:500px;overflow:auto;">center-content cell.  This should scroll independently, of left-nav and header  
        </div>
      </td>
   </tr>  
</table>

Open in new window

0
 
pdschullerAuthor Commented:
That might be just what I need since I cant use FRAMES.  

I will check it out in the morning.  Thanks.
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
alexpercsiCommented:
The only setback is that you CANNOT use relative widths and heights (e.g. 100%).
0
 
pdschullerAuthor Commented:
Thanks.  That is really getting me closer to what I want.  However, that produces two vertical scroll bars and I want only one.  The two scroll bars are:  one for the center-content div and one for the web page as a whole.  I can make the scroll bar for the web page as a whole go away if I make the height for the center-content div short, but that is not acceptable cause it would restrict the user too much.  What I want looks like this: there is one vertical scroll bar at the right edge of the browser window and that controls the scrolling in the center-content div.  The header/banner and the left navigation areas stay still.
0
 
pdschullerAuthor Commented:
I'm impressed.  Now it does what I wanted it to do.  It probably seems obvious to you but it would have taken me a long time time figure that out.  Thanks.
0
 
alexpercsiCommented:
It's something I've worked with quite a bit, quite a common question around the workplace as well :). I'm glad I could help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.