Hey everyone, I’m having a problem with safari(only). I have a parent div whose size will constantly change. In this div i have another div that constantly changes size. But i can’t get the parent div’s height to adjust to its children. It just completely collapses. Does anyone have any idea what might fix this.
Thanks!
Sounds like a float clearing problem - are the child divs floated?
Which version of Safari? Safari 2 or the upcoming Safari 3?
Does anyone have any idea what might fix this.
As mentioned above its either a float clearing issue or you have set a height somewhere.
We need some code to help more 
It’s safari 3.0.3 on windows
the html structure is somewhat like this:
<parent div>
<room>
<main title><floated subtitle></floated subtitle></main title>
<content>
<floated box></floated box>
</content>
</room>
<room>
... same stuff
</room>
</parent div>
css:
parent div > height:100%, overflow:auto;
room > height:100%, overflow:auto;
height 100% of what?..
What is the parent of the parent div? - is it the body or another div? and does this have a height set?
it’s another div. and it has no css applied to it.
You can only base a percentage height on an element that has a height defined. If the parent element is height:auto then height:100% on the child will equate to height:auto also which will mean it will collapse to content height.
It sounds as though you are trying to do something that is not possible but we are all still guessing as you are not providing us with the full details.
You should mock up a working html/css demo so we can see what’s really going on. (unless you have a live link of course which would be better)
I can’t show the page, sorry! It’s being developed on a local network. But why would my page render as intended on FF,IE, and Opera but not safari? I was hoping maybe someone would know if Safari had some special requirement… so i guess it’s safe to guess that a parent with a defined height would be that requirement? Would getting rid of one of the: height:100% fix it? that’s what i’m going to try… cause the page did work like the others at one point…
thanks for replying!
Hi,
If its working in Firefox, opera and IE then it sounds like a different issue. Older Safari doesn’t understand min-height so that would be an issue if you were using it. Otherwise Safari usually is pretty good.
IE6 and under however will work with 100% height because they treat height as a minimum so don’t let that confuse you. Opera and Firefox should be similar in behavior to Safari though unless its an older version as mentioned above.
The simplest solution would be for you to produce a scaled down test case that exhibits the problem. It might take you an hour to construct it but it will save you days waiting for someone to guess the answer.
Would getting rid of one of the: height:100% fix it?
Sounds like you are using it incorrectly anyway so try removing it and see what happens. Even if the 100% height works then that will stop the layout expanding pass the 100% mark and is seldom what you want. Read the faq on 100% height to understand how it works.
Sorry but I can’t offer any other suggestions at this point but could guarantee that we could answer your question in seconds if you had a working demo
Ok, i found which css is causing the problem. It was the height:100% on the room tag.
but why would height:100% cause the height to essentially collapse? isn’t that the opposite of what i’m telling it to do?
Another issue i’m having now… when i take away height:100%; Internet exploder displays the page as if it were first thrown in a blender. yayyy.
but why would height:100% cause the height to essentially collapse?
I thought I explained it quite clearly above
If the parent container is height:auto then a child with height:100% will collapse to height:auto also.
If a parent has a usable height (not height:auto and not related to content) the the child will expand to 100%. However the child will not expand pass the 100% mark.
another issue i’m having now… when i take away height:100%; Internet exploder displays the page a
That sounds like a “haslayout” issue and you probably need to give IE a hack like:
* html #elementname{height:1%}
It was the height:100% on the room tag.
What’s a room tag ? Or are you doing an xml conversion.
I meant to say div “room”. If you look at my example html above, the rooms tags represent those “room” divs.
I tried that IE hack you suggested and it turned the divs to 1% height. I guess IE is taking it literally? (:
I tried that IE hack you suggested and it turned the divs to 1% height. I guess IE is taking it literally?
I’m working in the dark a bit here but if you are sure IE needs that 100% height then use the star selector hack to give IE6 and under the 100% height.
I’d really like to see the page to see what’s going on You can send me a zip if you are still having problems.
I’m sorry for not making a demo, the page is pretty complex and i’m not sure i would be able to make an accurate reproduction. Time is another issue since i’m working on bunch of things at the moment. At first glance it was hard to tell what exactly the problem was because IE destroyed the page. But when i went back to it, the floated div within the content div(look to my html example) is spilling out passed the room div. The text content is fitting within the room div, though. I couldn’t really tell because IE was making the content within the room div disappear after a split second. Yes, magic.
So i guess it’s a float clearing issue… any suggestions?
You haven’t got time to make a test page but you’ve got time to keep coming back to this thread toing and froing with responses hoping that someone will be able to guess what the problem is without seeing any code? :?
i can read at the speed of light.
toing and froing… i like that. 
So i guess it’s a float clearing issue
If its a floating issue then adding overflow:auto to the parent of the float will make it contain its floated children. IE will need a “layout” hack which can be a dimension such as the height:1% hack offered earlier. Floating and clearing issues are covered in the FAQ on floats and should provide you with enough information to determine if this is the issue.
As Tyssen said its a little difficult to pinpoint like this because IE has many “haslayout” issues which can only be resolved by testing and seeing what is causing the problem.
You will just have to work logically through the issue’s we’ve raised in the posts as I am sure we have given the answers already but you may be unaware of how to apply then correctly.
Thanks for the help Paul i’ll see what i can do…