Problem with overflow and parent item stretching

[Plater]

I have run into a situation, where I am not clear what attribbutes I have set incorrectly.
I have the following snipit of html:

<div id="divFloatingSearch" >
    <div id="divSearchTop">
        Enter in a search parameter:
        <input name="tbSearchBox" type="text" id="tbSearchBox" onblur="CheckForAutoFill();" />
    </div>
    <div id="divSearchStatus">
        Waiting to search...
    </div>
    <hr  color="maroon"/>
    <div id="divSearchResults" >               
    </div>
</div>
 

And the related CSS is:

#divFloatingSearch
{
    position: absolute; 
    left: 0.5%; 
    top: 25%; 
    height: 500px;
    width: 200px; 
    text-align: center;
    background-color:#faebd7; 
 
    font-size: 10pt; 
    border: 1px solid;
 
}
#divSearchTop
{
}
#divSearchStatus
{
    width: 98%;
 
    display: block;
    background-color: #ffcc8c;
    font-size: 8pt;
    vertical-align: top;
    text-align: center;
    overflow: visible;
}
#divSearchResults
{
    background-color: #ffff99;
    height: 450px;
    width: 99%;
    overflow: auto;
}
 

Now the behavior I want, is to be able to appendChildren to "divSearchResults" in a way that "divSearchResults" will gain the scrollbars to scroll up/down and "divFloatingSearch" will just stretch to remain a "border" type effect if you will. IE6 exibits this behavior, but FF2 does not resize "divFloatingSearch" to keep up with "divSearchResults".

I would be completely OK with scrapping the scrollbars entirely and just correctly stetching the elements in a downward fashion. Possibly in the way that posting a message here can stretch the light-blue back ground and light-brownish/gray backgrounds with the textarea size.
Does anyone know what attributes I have set inccorectly in the CSS?
Is there like a "minimum-height" type attribute?

[David Laakso]

I am not clear what attributes I have set incorrectly.

I'm not sure either. Nor is it exactly clear to me what you hope to accomplish.

Min/max height [1] is supported, except in our good friends IE/6 and down. The good news (providing the user does not have js disabled) is that "IE expressions" or javascript can be used to simulate min/max in the lower IEs.

I put up a simple example [2]. Both blocks named .search have no height set. Both inner blocks named .result have a set min-height: 100px;. The behavior to put text in the top block could be programmed. Put enough text in that inside block .result and it will push to the Equator without breaking out the bottom of the outside containing block .search. In other words, the top block is always open-- program it and it will expand vertically. The bottom block is simply text added manually to show how it will expand if that text were programmed. I hope this makes sense...?

[1]
css2.1 specs-- min/max height
[2]
simple example

[drhowarddrfine]

I think we need to see some html to figure out what's going on.

[Plater]

[2]
simple example

That example is roughly exactly what I wish to do. Currently, I have removed all height attributes and let the box stay "collapsed" if you will. Since I will have to continue to dev for IE6, I will have to investigate those other methods maybe.

My ultimate end result would be to incorporate what you have in your [2] example, but then have a maximum bound as well that will start to scroll(maybe? I don't like the look of any of it though).

As for what its doing, I have an order form with many fields. Off to the left is this search thing. the results of that search are set in individual <div>s and when clicked, fills the fields with the correct results.

The problem came about with that there could be a LARGE number of results, and I think it bad practice to let it just keep going downward, forcing the user to scroll the WHOLE page (and losing track of the fields that need to be filled in) to possibly find their result. I might just put a size for the box back in and tell it to overflow:auto

I will attempt to break this apart into an example webpage to be shown.

[David Laakso]

My ultimate end result would be to incorporate what you have in your [2] example, but then have a maximum bound as well that will start to scroll(maybe? I don't like the look of any of it though)...<trim>
I might just put a size for the box back in and tell it to overflow:auto

Whatever does it for you and yours. I know from nothing about matters of aesthetics, much less functionality, or usablity...

[Plater]

I think I have decided to let the parent have no height attribute and supplying a static height (px) value for the child div and set overflow auto to on.
It looks the same in IE6/FF2/chrome and I have warmed up to having the scroll bar there.
Thanks for all the help. I also have no concept of asethetics, so having to do it makes my brain hurt.

[David Laakso]

Least you make what little is left of my brain hurt, consider setting overflow-y: scroll; Unless you know, of course, your users are very agile and have good eye and hand motor-skills enabling them to read while controlling both an horizontal and vertical scroll bar in your 200px wide block? So much for aesthetics...

[Plater]

It doesn't seem to cause horizontal scrolling. (I would kill myself if I thought I made something that scrolls left/right)
Plus: overflow-y isn't supported in ie6 :-(

[David Laakso]

overflow-y isn't supported in ie6 :-(

Please reload this in IE/ 6.0: overflow-y:scroll; in IE/6.0
"Property overflow-y doesn't exist in CSS level 2.1 but exists in [css3] : scroll"
Apology for the confusing issues of overflow:auto ; / overflow:scroll; / overflow-y:scroll; The above link uses overflow-y:scroll; and works as intended in IE/6.0.

[Plater]

I've got it working (or so it would seem?) with the regular overflow calls.
No scrolling to the right happens. I think because I specify a width (in px) and it won't go over that, just wraps downward.
ALTHOUGH, I could probably still be hit with problem of having a really long string of characters with no blank space in it. Makes all browsers crap when it happens if you don't do anything about it.
But since I control what comes out of the search, shouldn't ever be an issue.

[David Laakso]

OK. Whatever works for you, and the browsers you intend to support, is the name of the game...

Good luck and best wishes for your success.

[Plater]

OK. Whatever works for you, and the browsers you intend to support, is the name of the game...

Good luck and best wishes for your success.

Which browsers have I not addressed?
IE, FF and Google Chrome are functioning correctly and with no horizontal scroll bars?

[David Laakso]

Which browsers have I not addressed?
IE, FF and Google Chrome are functioning correctly and with no horizontal scroll bars?

Can't see it so can't test it or push the envelope by stress testing it in any browser.