Question

This might be hard to show exactly what I’m trying to accomplish, so please bear with me.

I have an auto-complete result box I am having trouble style properly.

Here there are 2 divs:

<div id="SearchResultsContainer">
<div id="SearchResults">

</div>
</div>

With this CSS:

#SearchResults {
    border: 2px solid #666;
    margin: 0px auto;
    width: 100%;
}

#SearchResultsContainer {
    margin: 0px auto;
    width: 54%;
    height: 200px;
    overflow-y: auto;
    display: none;
    padding-right: 4px;
}

Ok, now for the problem. With this styling, the inner SearchResults div styles the border. This is fine if there are say 2 results.

When there is overflow-y, the bottom border disappears until the user scrolls to the bottom.

If I add the border-bottom to SearchResultsContainer, the border is placed at the bottom of the 200px high SearchResultsContainer, regardless of how many results there are so it looks like a floating line across the screen..

What is the best way to handle the border bottom? I found a few methods on google to determine if the scrollbars are active on the div, but is there a more eligant way to handle the bottom border?

I hope I explained the problem well enough, if not please ask!

Thanks

Answer 1

Basically the functionality desired is to have the border expand with the content until a certain point and then make the content scrollable. This can be accomplished with the max-height attribute.

max-height:150px;

http://jsfiddle.net/6bbQT/