Hi, I'm working on a website and the layout is as follows: i want to be able to have an outer box for the sidebar and there should be an inner box that will scroll when the outer box shrinks too much. Assuming that our sidebar is called #navigation and the innerPanel is called .innerPanel, how would this work? I'm including the HTML and the CSS fragments of the page below:

The HTML first - the extra div's are for rounded corners:

<div id="navigation"> 
    <div id="logo" class="box"> 
      <div> 
        <div> 
          <div style="text-align: center;"> 
          <img src="./images/pictures/cbk-logo-sm.gif" alt="CBK Logo" /> 
          </div> 
        </div> 
      </div> 
    </div> 
 <div id="links" class="box"> 
      <div> 
        <div> 
          <div>             <ul> 
              <li id="home"> 
                <a href="index.php" title="Home">Home</a> 
              </li><li> 
                <a href="applications.php" title="Apply as a staff member or camper">Applications</a> 
              </li><li id="last"> 
                <a href="about.php" title="About our directors, our grounds and our campers">About</a> 
              </li> 
            </ul><div class="innerPanel"><div class="innerMost"><h4 class="titleHead"> 
            Contact Information</h4> 
                <h5 style="margin: 0.8em 0 0 0; padding: 0;">City Office (September-June)</h5> 
                <p style="font-size: 0.75em; margin: 0; padding: 0;"> 
            <em>Phone:</em> 516-374-2772<br /> 
            <em>Fax:</em> 516-374-2534<br /> 
            <em>Email:</em> beikyta641@gmail.com<br /> 
            <em>Address:</em> 425 Arbuckle Avenue Cedarhurst, NY 11516
            </p> 
            <h5 style="margin: 0.8em 0 0 0; padding: 0;">Camp (July &amp; August)</h5> 
            <p style="font-size: 0.75em; margin: 0; padding: 0;"> 
            <em>Phone:</em> 845-439-3200<br /> 
            <em>Fax:</em> 845-439-3154<br /> 
            <em>Email:</em> beikyta641@gmail.com<br /> 
            <em>Address:</em> 641 Knickerbocker Road, Livingston Manor, NY 12758
            </p></div></div>      </div> 
        </div> 
      </div> 
    </div> 
  </div>

And the CSS:

/* 

  Navigation

*/ 


#navigation{
  position: absolute;
  left: 1.5625em;
  top: 1.5625em;
  bottom: 1.5625em;
  display: block;  
  width: 12.5em;
  background: navy;
  border-right: 1px solid navy; 
  text-align: center;
  background: #B6D2F0;
  padding: 5px;
  color: #4A4A49;
  overflow: hidden;
}

#navigation .innerPanel{    
    max-height: 200px;
    height: auto;
    overflow: auto;
}

.titleHead{
  margin: 0;
  padding: 0;
}


/* inverted corners for the links */
#navigation #links {     
  position: relative;
  padding-top: 30px;
}

#navigation #links div div div h3{
  border-top: 1px solid navy;
  border-bottom: 1px solid navy;
  color: navy;
  padding: 0px;
  margin: 0px;
  margin-top: 1px;
  line-height: 1.2em;
}

#navigation div div div div ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

#navigation div div div div ul li{
  text-align: center;
}

#navigation div div div div ul li a{
  display: block;
  text-decoration: none;
  font-weight: bold;
  color: #B6D2F0;
  padding: 0px;
  padding-left: 0;
  line-height: 2.5em;
  background: navy;
  border-bottom: #D8F4F2 1px dashed;  
  }

#navigation div div div div ul li a:hover{
  display: block;
  text-decoration: none;
  font-weight: bold;
  color: #D8F4F2; 
  background: #0000A2;
}

#navigation div div div div ul #last a{
  border-bottom: 0px;
}

Thank you so much in advance. IE6 is not a major concern. I would prefer an all CSS solution, although, as you can see, i am not against an extra set of HTML tags or two.

1 answer

0
points

Did you try setting the inner div's height to 100% and overflow to scroll?

Answered about 7 years ago by Maidomax
  • Didn't work. Tentatively using: #navigation .innerPanel { max-height: 200px; /* supply current height here */ height: auto; overflow: auto; } But the box is a fixed size. I'd like it to expand and if there is enough room, I don't want the scrollbar altogether. Moshe B about 7 years ago