[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

nested div - overflow:auto help

Posted on 2007-08-05
9
Medium Priority
?
934 Views
Last Modified: 2008-03-10
I have two divs with one div nested inside the other.  When the content of the nested div fills the containing divs available space, I want the scrollbars to activate and allow the remaining content in the nested div to be able to be scrollable.

Here is the basic structure:

#parent {position:relative;height:65%;overflow:auto;}
#child {position:absolute;bottom:0;}

<div id="parent">
     <div id="child">
          <!--content goes here-->
     </div>
</div>

The closest I've come to a solution is using min-height and max-height on the child div like this:

#child {position:absolute;bottom:0;min-height:35%;max-height:65%;}

this semi-works in IE7& FF, but fails completely in IE6, Netscape and Opera.  I haven't tested Safari.

Thanks in advance for any help.
0
Comment
Question by:-Dman100-
  • 5
  • 3
9 Comments
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 19635449
Hi Dman100,

You know that this is not working because the nested div is absolutely positioned and out of the flow? Is this a design requirement?

Steggs
0
 
LVL 17

Expert Comment

by:mreuring
ID: 19635559
Hmm, I can cook something up that'll work on most, if not all, brand-new browsers. But, to do what you want, on IE6 and perhaps a few of the older ones, will require some nasty bit of scripting, I doubt it's worth the effort!
May I inquire as to what the reason for this solution is? Perhaps we can work around it to come up with someting that safer to implement?
0
 

Author Comment

by:-Dman100-
ID: 19635734
Hi Steggs and mreuring,

Thanks for replying to my post.

The absolutely positioned div, which is the child div is nested within a relatively positioned div (the parent), so I thought if an absolutely positioned div is inside a relatively positioned div it doesn't break out of the normal flow of the page?  Is that incorrect?

Here is the page that I'm trying to get this work on.  

http://www.dwayneepps.com/index.aspx

The basic structure has 4 divs all floated left, which breaks the layout into 4 quadrants (top left, top right, bottom left and bottom right).  The top left quadrant is 35% width and 65% height.  The top right quadrant is 65% width and 65% height.  The bottom left quadrant is 35% width and 35% height and the bottom right quadrant is 65% width and 35% height.

The content in the top left and top right quadrants have a nested divs that are absolutely positioned and set to bottom:0; inside the relatively positioned parent div, so it sits flush at the bottom.

I tested this in IE6, IE7, FF, Netscape and Opera and it all looks correct.  However, when you resize the browser window to a smaller size or view in a lower resolution, say, 800X600, the content in the top right quadrant isn't all viewable.  So, I was trying to set an overflow on the parent div so the scrollbar would activate when the content exceeded the parent height.

If there is another method or solution, that would be great.  I just need to keep the layout looking the same.

Does this make sense?

Thanks for your help.  I really appreciate it.
Regards.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 17

Expert Comment

by:mreuring
ID: 19636053
To be honest, I currently lack the abillity of tesing for IE (don't have a windows machine available) so all I can posibly provide is a suggestion.
The overflow on the parent is tricky, it depends on the browsers' interpretation on whether or not to count absolutely positioned content as an overflow (although it should). You might get away with moving the overflow to the child and setting the max-height of the child to 100%. However, this is where IE6 starts to become the anoying partner.
In the past I've been scripting a lot of expression to implement min/max width for IE, but I haven't been so bold as to make one for height yet, nor do I believe that a generic expression will fit all situations. This however _might_ do the trick for you:
* html #child {
  height: expression(((treshhold = 25) && (this.parentNode.offsetHeight <= this.offsetHeight + treshhold))?(this.parentNode.offsetHeight - treshhold) + "px":"auto");
}

where you should alter the treshhold value to whatever margin / padding you have. **Be warned** If the treshhold is too low you will crash your IE6 browser. And like I said, I cannot test this expression, it's a quick remake of a min/maxwidth expression I have made long time ago (href:Q_21186031.html)...

Good luck, I'll chime in if I can help further...

 Martin
0
 

Author Comment

by:-Dman100-
ID: 19636228
Hi Martin,

Thanks for the info.  I have never used a style rule expression before.  To be honest, I didn't even know you could write an expression in a style rule.

So, being in the dark about this one, could you give a brief explanation of what is happening in that expression, and/or, point me to a article or tutorial on style rule expressions, so I can get some background understanding.

This looks interesting and very possibly the solution I will need to make this layout work.

Thanks for your help.
Regards.
0
 
LVL 17

Accepted Solution

by:
mreuring earned 2000 total points
ID: 19636341
Well, an expression is something only IE supports (and mostly for good reasons others do not). It allows you to accually use javascript in a style-rule and thus generate dynamic values.

This particular expression is somewhat dangerous as by its' verry nature it might generate an endless loop.

What's happening is that IE will evaluate the expression whenever it re-renders the page. It will be evaluated within the scope of the element(s) the rule applies to and return the result as the value for the rule you apply it to. An expression may not contain newline characters and that somewhat increases the complexity of writing expressions. I will unwrap the suggested expression, by removing the shorthands I've aplied:
var treshhold = 25;
if (his.parentNode.offsetHeight <= this.offsetHeight + treshhold)) {
  return (this.parentNode.offsetHeight - treshhold) + "px";
} else {
  return "auto";
}

I hope this will make it possible for you to 'read' the expression! The danger in this expression lies in the effect of its' result. By passing back a fixed width IE will have to re-render part of the page, if this value causes the evaluation to return a different result IE will drop into an eternal loop, effectively dropping your browser into a deep coma...

Hope this info helps you further along,

 Martin
0
 

Author Comment

by:-Dman100-
ID: 19649728
Hi Martin,

Well, I tried placing the overflow:auto; on the child div with the max-height set to 100% and then I also added the style rule expression for IE, which it didn't crash IE by going into an infinite loop.

However, the overflow didn't activate in IE, FF, Netscape or Opera when I placed it on the child div?  Is this because of the absolute positioning?

Would there be another way to accomplish the same type of layout than the way I'm trying?
0
 
LVL 17

Expert Comment

by:mreuring
ID: 19657387
Hmmm, I didn't test it on your site's layout, instead I used your original testcase and that worked fine in FF, Opera and Safari, the problem was I couldn't test for IE and therefor couldn't give you a working example.

But then I've also noticed that for FF it seems to already work on your website. So, let me mix up an example that works in all but IE6 and then if that seems to work for you also, test if the expression works on that as well...

Give me a bit of time to mix up the example :)
0
 
LVL 17

Expert Comment

by:mreuring
ID: 19659439
Alright, got a little pressed with work, here a proof of concept:
<head>
<style type="text/css">
      html,body {
            margin: 0;
            padding: 0;
            height: 100%;
      }
      #parent {
            float: right;
            position:relative;
            width: 50em;
            height:65%;
            width: 65%;
            overflow:auto;
            background: red;
      }
      #child {
            width: 100%;
            position:absolute;
            bottom:0;
            background: yellow;
            max-height: 100%;
            overflow: auto;
      }
      * html #child {
              height: expression(((treshhold = 2) && (this.parentNode.offsetHeight <= this.offsetHeight + treshhold))?(this.parentNode.offsetHeight - treshhold) + "px":"auto");
      }
</style>
</head>
<body>
      <div id="parent">
            <div id="child">
                  <h3>Some content</h3>
                  <p>content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </p>
                  <p>content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </p>
                  <p>content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </p>
                  <p>content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </p>
                  <a href="#dummy">Some link</a>
            </div>
      </div>
</body>

Also live available at: http://www.windgazer.nl/eexchange/Q_22743088.html

Truth be told, I might've forgot to mention that for IE you'd best get your #parent to have hasLayout and you must set a height for the parent.

Hope this will help you get things running!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses
Course of the Month19 days, 17 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question