Question

I have some problems resizing a div with ID mask which I use to with a scrollTo() effect.

The #mask is sized to 100% browser both sides and overflow: hidden, so when I click on the menu the mask scrolls to the chosen div.

The HTML looks like this:

<div id="mask">
  <div id="scrollcontent">
     <div id="content1">
     </div>
     <div id="content2">
     </div>       
     etc.....
</div>

The problem is one of the divs inside the mask has content that is too big for the mask div and I can’t see it fully. Is there a way to resize the mask div to the content div inside so it could be displayed fully?

Again, the mask is overflow:hidden :/

Answer 1

The easiest way is to add an extra div at the end that clears all floats

<div id="mask">
    <div id="scrollcontent">
       <div id="content1">
       </div>
       <div id="content2">
       </div>
       <div style="clear: both"></div>
    </div>
</div>

You can also do some pseudo class styling, using Micro Clearfix Hack.

EDIT: To have it use a scrollbar on the outer div, change overflow: hidden to overflow: scroll.