0

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 :/

Jeff B
  • 29,943
  • 7
  • 61
  • 90
Alexis Rabago
  • 3
  • 1
  • Perhaps adding [`max-width: 100%`](https://developer.mozilla.org/en/CSS/max-width) and [`max-height: 100%`](https://developer.mozilla.org/en/CSS/max-height) to the inner element will solve your problem instead? – Blazemonger Apr 10 '12 at 21:45
  • the widths and heights of the divs inside are: scrollcontent: width: 400% cos i have 4 divs inside height: 100% content divs: width: 25% cos i have to use 25% of the scrollcontent width and height: 100% too – Alexis Rabago Apr 10 '12 at 21:47

1 Answers1

0

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.

saluce
  • 13,035
  • 3
  • 50
  • 67
  • what i intended to do was more like a way to show the scrollbar to scroll down the webpage if the height of the content div was too big for the mask, duno if i have to remove the height 100% or use something to resize it :/ – Alexis Rabago Apr 10 '12 at 21:55