• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 562
  • Last Modified:

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>
0
pdschuller
Asked:
pdschuller
  • 4
  • 3
1 Solution
 
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
 
alexpercsiCommented:
The only setback is that you CANNOT use relative widths and heights (e.g. 100%).
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
alexpercsiCommented:
you can always force the page scrollbar to disappear. try adding style="overflow:hidden" to the body tag and see if it helps.
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

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now