Hi folks,
The code for a block of divs follows. What I WANT to happen is the following: the outer-most div should not exceed its 263px height. Within that div, if the div named 'top' has enough content to bloat it past its normal size, I want the div named 'bottom' to compress and have a scroll bar pop up to allow one to access all of its content. Again, the problem is that I want the whole thing never to exceed 263 in outer-most height, but right now the whole lot just bloats up past 263 if either the 'top' or 'bottom' div get bigger than their nominal heights...
In other words: how to get div 'top' to always expand to show its content with no scrolling while, 'bottom' div starts scrolling if either div gets big enough to push the outer-most div's height past its set 263 value?
Thanks!
<div style="height:263;max-height:263px;">
<div style="margin-left:15px;color:#000000;font-family:arial;font-size:11pt;font-weight:bold;width:405;height:25;">Bruce Barry</div>
<div style="margin-left:25px;color:#000000;font-family:arial;font-size:9pt;font-weight:bold;width:405;height:16;">Exhibits:</div>
<div NAME="top" style="margin-left:25px;width:405;">
<div style="margin-right:5px;color:#000000;font-family:arial;font-size:8pt;line-height:11pt;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
</div>
</div>
<div style="height:18px;"></div>
<div NAME="bottom" style="margin-left:15px;width:405px;overflow:auto;">
<div style="margin-right:5px;color:#000000;font-family:arial;font-size:8pt;line-height:11pt;">
Randall Deihl is known for unusual landscapes and intricate still life paintings of unexpected objects.
Intense light and heightened color are qualities of each painting.
A member of the group of western Massachusetts painters known as “Pioneer Valley Realists”, his
paintings are introspective and bring forth humor and emotion routed in the American landscape.
Deihl earned his BFA at California College of Arts and Crafts. His work has been featured in group
shows at Danforth Museum, DeCordova Museum, Metropolitan Museum of Art, New York, and can be found
in the collections of Danforth Museum of Art, Metropolitan Museum of Art, Museum of Fine Arts, Boston,
National Academy of Design, New York, and Albrecht Durer Museum, Germany.
<br><br>
Randall Deihl is known for unusual landscapes and intricate still life paintings of unexpected objects.
Intense light and heightened color are qualities of each painting.
A member of the group of western Massachusetts painters known as “Pioneer Valley Realists”, his
paintings are introspective and bring forth humor and emotion routed in the American landscape.
Deihl earned his BFA at California College of Arts and Crafts. His work has been featured in group
shows at Danforth Museum, DeCordova Museum, Metropolitan Museum of Art, New York, and can be found
in the collections of Danforth Museum of Art, Metropolitan Museum of Art, Museum of Fine Arts, Boston,
National Academy of Design, New York, and Albrecht Durer Museum, Germany.
</div>
</div>
</div><div style="maximum-height: 263px; overflow:visible;>Hi KDLA,
Where are you suggesting I use the properties you gave here? And correct me if I'm wrong, but the property is 'max-height', not 'maximum-height', right?
Thanks for looking into it.You're right on the max-height thing. I'm multi-tasking and typing a little faster than my brain can process.
And, yes, try using those. You can also set the overflow property to scroll if you want it specified in the coding.
KDLAKDLA,
I've been using those properties to some success already, but the problem I'm having is very specific to the circumstances I described and the code that I posted.
You can see in the code that I am specifying max-height, and height at 263 in the outer-most div, but it is still scaling beyond that for some reason when the divs contained within it add up to more than 263. I want one of those divs inside to size itself down if the other inside the outer div is pushed bigger than its respective allotment of space.
In other words as div A gets bigger, div B gets smaller so that A+B always equals 263. See what I mean? And B has a scrollbar, A doesn't.
Right now I'm looking at possibly dynamically sizing the second div with JS upon reading the height of the first div.
But I was hoping there was an easy way just by setting propery values correctly...Are you viewing it in FF or IE?
IE always stretches the page to fit the screen, no matter what your settings.In Safari the div's stretch to accomodate the content, and in FF and Opera the content just flows out of the divs and doesn't scroll, even though it's set to do s
K, I figured out how to do this. I set up a function that when called in the onLoad handler, it reads the height of the top div and then sets the height of the bottom to the outer limit less the top div and spacer divs between the two of interest. Like this:
function sizeDiv()
{
bottom.style.height = 190 - topdiv.clientHeight;
}
Where 190 is the portion of the whole outer div less the spacers within the outer div that have fixed height (263 - 25 - 16 - 14 - 18 = 190).
Works great in Saf, FF, O and IE
Hope this helps someone out there.
The code for a block of divs follows. What I WANT to happen is the following: the outer-most div should not exceed its 263px height. Within that div, if the div named 'top' has enough content to bloat it past its normal size, I want the div named 'bottom' to compress and have a scroll bar pop up to allow one to access all of its content. Again, the problem is that I want the whole thing never to exceed 263 in outer-most height, but right now the whole lot just bloats up past 263 if either the 'top' or 'bottom' div get bigger than their nominal heights...
In other words: how to get div 'top' to always expand to show its content with no scrolling while, 'bottom' div starts scrolling if either div gets big enough to push the outer-most div's height past its set 263 value?
Thanks!
<div style="height:263;max-height:263px;">
<div style="margin-left:15px;color:#000000;font-family:arial;font-size:11pt;font-weight:bold;width:405;height:25;">Bruce Barry</div>
<div style="margin-left:25px;color:#000000;font-family:arial;font-size:9pt;font-weight:bold;width:405;height:16;">Exhibits:</div>
<div NAME="top" style="margin-left:25px;width:405;">
<div style="margin-right:5px;color:#000000;font-family:arial;font-size:8pt;line-height:11pt;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">"Randall Deihl: Call Me Rand"</a><br>
</div>
</div>
<div style="height:18px;"></div>
<div NAME="bottom" style="margin-left:15px;width:405px;overflow:auto;">
<div style="margin-right:5px;color:#000000;font-family:arial;font-size:8pt;line-height:11pt;">
Randall Deihl is known for unusual landscapes and intricate still life paintings of unexpected objects.
Intense light and heightened color are qualities of each painting.
A member of the group of western Massachusetts painters known as “Pioneer Valley Realists”, his
paintings are introspective and bring forth humor and emotion routed in the American landscape.
Deihl earned his BFA at California College of Arts and Crafts. His work has been featured in group
shows at Danforth Museum, DeCordova Museum, Metropolitan Museum of Art, New York, and can be found
in the collections of Danforth Museum of Art, Metropolitan Museum of Art, Museum of Fine Arts, Boston,
National Academy of Design, New York, and Albrecht Durer Museum, Germany.
<br><br>
Randall Deihl is known for unusual landscapes and intricate still life paintings of unexpected objects.
Intense light and heightened color are qualities of each painting.
A member of the group of western Massachusetts painters known as “Pioneer Valley Realists”, his
paintings are introspective and bring forth humor and emotion routed in the American landscape.
Deihl earned his BFA at California College of Arts and Crafts. His work has been featured in group
shows at Danforth Museum, DeCordova Museum, Metropolitan Museum of Art, New York, and can be found
in the collections of Danforth Museum of Art, Metropolitan Museum of Art, Museum of Fine Arts, Boston,
National Academy of Design, New York, and Albrecht Durer Museum, Germany.
</div>
</div>
</div><div style="maximum-height: 263px; overflow:visible;>Hi KDLA,
Where are you suggesting I use the properties you gave here? And correct me if I'm wrong, but the property is 'max-height', not 'maximum-height', right?
Thanks for looking into it.You're right on the max-height thing. I'm multi-tasking and typing a little faster than my brain can process.
And, yes, try using those. You can also set the overflow property to scroll if you want it specified in the coding.
KDLAKDLA,
I've been using those properties to some success already, but the problem I'm having is very specific to the circumstances I described and the code that I posted.
You can see in the code that I am specifying max-height, and height at 263 in the outer-most div, but it is still scaling beyond that for some reason when the divs contained within it add up to more than 263. I want one of those divs inside to size itself down if the other inside the outer div is pushed bigger than its respective allotment of space.
In other words as div A gets bigger, div B gets smaller so that A+B always equals 263. See what I mean? And B has a scrollbar, A doesn't.
Right now I'm looking at possibly dynamically sizing the second div with JS upon reading the height of the first div.
But I was hoping there was an easy way just by setting propery values correctly...Are you viewing it in FF or IE?
IE always stretches the page to fit the screen, no matter what your settings.In Safari the div's stretch to accomodate the content, and in FF and Opera the content just flows out of the divs and doesn't scroll, even though it's set to do s
K, I figured out how to do this. I set up a function that when called in the onLoad handler, it reads the height of the top div and then sets the height of the bottom to the outer limit less the top div and spacer divs between the two of interest. Like this:function sizeDiv()
{
bottom.style.height = 190 - topdiv.clientHeight;
}
Where 190 is the portion of the whole outer div less the spacers within the outer div that have fixed height (263 - 25 - 16 - 14 - 18 = 190).
Works great in Saf, FF, O and IE
Hope this helps someone out there.