trying to get a div to behave in relation to another

@scottPadgettNov 15.2005

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!

[code=html]<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=””>”Randall Deihl: Call Me Rand”</a><br> <a href=””>”Randall Deihl: Call Me Rand”</a><br> <a href=””>”Randall Deihl: Call Me Rand”</a><br> <a href=””>”Randall Deihl: Call Me Rand”</a><br> <a href=””>”Randall Deihl: Call Me Rand”</a><br> <a href=””>”Randall Deihl: Call Me Rand”</a><br> <a href=””>”Randall Deihl: Call Me Rand”</a><br> <a href=””>”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 &#8220Pioneer Valley Realists&#8221, 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 &#8220Pioneer Valley Realists&#8221, 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>[/code]

to post a comment

CSS

7 Comments(s) _↴

@KDLANov 15.2005 — #<div style="maximum-height: 263px; overflow:visible;>

@scottPadgettauthorNov 15.2005 — #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.

@KDLANov 15.2005 — #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.

KDLA

@scottPadgettauthorNov 15.2005 — #KDLA,

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...

@KDLANov 15.2005 — #Are you viewing it in FF or IE?

IE always stretches the page to fit the screen, no matter what your settings.

@scottPadgettauthorNov 15.2005 — #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 so.

@scottPadgettauthorNov 15.2005 — #OK, 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.

Also in #CSS _↴

Vertical CSS sprite menu floating a menu align css layer to position in right corner

Success!

Help @scottPadgett spread the word by sharing this article on Twitter...

Tweet This

trying to get a div to behave in relation to another

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

trying to get a div to behave in relation to another

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴