Link to home
Create AccountLog in
Avatar of WDampier

asked on

How can I nest one div within another vertically, w scrollbars on the second using DW8 + CSS

I have a 2 col layout w the left col. floated. In the top portion of that col. I have some text and links that are static. Below that I want to use php to 'include' an htm file with scrollbars to handle the overflow.

When I apply the {overlow} property to the div, the entire div scrolls, of course. You can see the present result here:

I want the top part to remain static, and the bottom portion to scroll. Any suggestions?
Div nested within div? <p> tag w overflow property assigned to it? Something else?

Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Hi WDampier,

>> Div nested within div?

Yes.  Nest the second div inside the first one.  Set the second div to have a height (pixels or percents) and set its overflow property.  Then include the php call.
Avatar of WDampier


Almost there. That displays properly, but it leaves me with a space between the right border and the scroll bars that I suspect is caused by the padding in the parent div. How can I keep the padding for the parent div, eliminate it for the nested div? Here's the css I'm using (leftcolumn2 is the nested div).

#outerWrapper #contentWrapper #leftColumn1 {
      background-color: #f4f1e7;
      float: left;
      border-right: solid 1px #bd9c76;
      width: 28%;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 9pt;
      padding-top: 10px;
      padding-right: 10px;
      padding-bottom: 25px;
      padding-left: 10px;
      margin-bottom: 10px;
      #outerWrapper #contentWrapper #leftColumn2 {
      height: 2000px;
      overflow: auto;
      padding-right: -8px;

And here's the html:

  <div id="contentWrapper">
          <div id="leftColumn1">
            <p><a href="intro.php" target="_blank">Join our free information list</a></p>
            <p><a href="pub_intro01.php">Skip this page</a></p>
            <p><a href="Newbies/newbie01.php">Newbies</a></p><br />
            <h2>Today in Nat's chat room</h2>
      <p>Some text and links here..</p>
      <h3 align="center">Transcript:</h3>
                  <div id="leftColumn2">
                        <?php include ('today_chat.htm'); ?>


Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Terrif. Thanks  Jason. Full Marks.
Very helpful. Thanks again.
You're welcome!  Good luck.