Forum Moderators: not2easy

Message Too Old, No Replies

N 6,7 div w/in div height issues

div w/in a div height issue

         

gonso

7:28 pm on Feb 11, 2004 (gmt 0)

10+ Year Member



hi,

i have created a <div> with a fixed height of 600px and within this, i have placed another <div> with a height of 100%. i would like the child <div> to expand to the full space of the container <div> but for some reason, it extends beyond the the container <div> in Netscape 6 and 7 and mozilla. it works in IE. can someone help me out.

the test page is
[ohsu.edu...]

thx,

john

isitreal

11:01 pm on Feb 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



It looks like the content div that is too long is nested in the wrapper div from what I can see, the wrapper has a height of 600, but there are other divs that take up about 150px of space above the left div that is extending down and you didn't take their height into account so Mozilla and Opera are correctly setting the height at the height of wrapper, thus pushing it down below the main content area, floating is dangerous like that, by the way.

gonso

11:35 pm on Feb 11, 2004 (gmt 0)

10+ Year Member



so IE is actually interpreting the style incorrectly? is there any way to get the child container to always expand to the size of the parent without having to give it a fixed height?

thx,

jon

isitreal

11:44 pm on Feb 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Yes, IE is making a mistake, the problem is that you need a container div below your header/navigation divs that contains all the content divs, set a height to that, then nest the content divs inside that and set their height at 100% and it will work fine.

gonso

12:02 am on Feb 12, 2004 (gmt 0)

10+ Year Member



thx so much for all your help. i got one more question.

ultimately i would like to have columns floated next to each other that equally expand vertically as content is added even if only one of the columns (let's say the RIGHT one) has content that is pushing it to expand vertically.

my plan had been to set up two child <div>'s in a parent <div>. i wanted the parent <div>'s height to be set to be able to expand based upon the content it contained (height: auto?)

then the children's heights would be set to 100%. as one of the child columns (the one with the more content...the RIGHT one) expanded, it would cause the parent's height to expand which would then hopefully cause the other colunn's (the one with only a little content) height to expand in unison with the right column.

is this possible to do? i have tried a few variations and don't seem to be able to get it to work in Netscape.

thx for your help...i hope this makes sense.

isitreal

3:36 am on Feb 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



What you want here is called a table I'd say. I doubt you can ever get this to work cross browser, but if there is a way maybe somebody can show it. I can almost guarantee you it will never work in Opera.

edisraf321

10:54 pm on Feb 12, 2004 (gmt 0)

10+ Year Member



This may help:

[pixy.cz...]