I am in the process of designing my first website completely in CSS so I am still very very new to this. I have designed my pages so that excess text will scroll within a div. Most of the pages have little text so there will be no scrolling but the pages which do scroll have a very long scrollbar. I have uploaded a sample at http://www.clearlygreendesign.com/av...ite/about.html

What I have done is created 3 divs for the donation button, the content and the image on the right side. I have floated them so they are lined up properly and I have also added padding to them so that the content or each div doesn't butt up to the navbar. Now I see that the scrolling content area adopts the height dimension of the entire div including the padding I have allocated. I don't want this. I actually only want the scrollbar to align with the heading in the content area. I'm not sure what the best way to do this is. The CSS I am using for the content div is as follows:

#content {
float: left;
width: 367px;
height: 360px;
overflow: auto;
padding: 45px 18px 18px 30px;

Is there a way to "tell" the scrollbar to only take on the area which is not padded or is there some trick to do this that I'm unaware of?