Flexible DIV height?

[synth]

Hi all,

Have a small problem here, need advice..!

I have two DIVs one after another. The DIV at the left contains the navigation, and the other one content. Both have a fixed height value in pixels set (900px). The minimum height for the DIVs has to be 900px in order to fit a JavaScript menu I am using.

Now, when content in the content DIV overflows, it shows nicely in IE. However in Opera and Moz the background colour ends just right at the 900px mark. A bad solution would be explictly setting the height of the content DIV to a higher value, e.g. 1500px.. I don't want to do that.

Is there a way to get the DIV to "grow taller"?

[Lister14]

have you tried this?

#div {
      ...;
      height: auto;
      ...;
     }

if thew java thingy will take 900px anyway, the rest should just 'grow' with the amount of content.

[synth]

Well I did think of using

auto

, it solved one part of the puzzle (overflowing the DIV).. now I'm thinking over something else.

What if the content DIV grows too short? The navigation DIV will be longer (not the same height with content DIV).

[synth]

still looking for an answer, hope someone knows.. otherwise its back to the bad solution. hehe.

[Helge]

I've never tried it but you could look into 'max-height' and 'min-height'.
It's CSS2 so that might not solve your problem anyway?

http://www.w3schools.com/css/css_dimension.asp

-Helge

[synth]

Yeah, looked into it earlier but you know the thing with CSS2...

Thanks for all the help people!

[audiolizard]

Why do you need to assign a height to your content at all? I had a similar problem that nobody could/wanted to answer in my thread about CSS IE6 and NS7 driving me INSANE. I fixed it by using an absolute positioned navigation div and a regular content div with a huge left margin where the navigation div goes. No floats. I think it sux that CSS can only work in such an unintuitive way, but thems the breaks. I think CSS is a failure in many ways, whereas tables have succeeded far beyond their intended usage because of their intuitive nature. I hope people come to realize that CSS isn't necessarily great just because it's the new standard, although it certainly is a vast improvement in areas other than document layout.

And please do something about that signature of yours, synth. It's extremely annoying.

[synth]

Originally posted by audiolizard
Why do you need to assign a height to your content at all? I had a similar problem that nobody could/wanted to answer in my thread about CSS IE6 and NS7 driving me INSANE. I fixed it by using an absolute positioned navigation div and a regular content div with a huge left margin where the navigation div goes. No floats. I think it sux that CSS can only work in such an unintuitive way, but thems the breaks. I think CSS is a failure in many ways, whereas tables have succeeded far beyond their intended usage because of their intuitive nature. I hope people come to realize that CSS isn't necessarily great just because it's the new standard, although it certainly is a vast improvement in areas other than document layout.

And please do something about that signature of yours, synth. It's extremely annoying.

Yes audioliz, I am quite sure this problem can be solved using tables, although I have not tried (and probably won't until I have the time). I don't really mean to assign a height to the content at all, just that it is a simple way to solve the problem that I am having. Maybe its the amateurish interpretation of CSS that I have.

I really do care that I don't use tables unless they are absolutely required. Yes I really do.

Oh, and I have fixed my signature. You were really helpful, thanks.

[audiolizard]

Sorry, I didn't mean to suggest that tables were the answer to your or anybody's problem. My point, which was unrelated to your problem, is that despite the push toward web standards and CSS, people are still using tables simply because they WORK, and they're relatively easy to understand. CSS is harder than it needs to be, and it's frustrating when you follow the rules and the browsers don't.

Do you have an example of your page on the web anywhere?

I based my current site design on this:
http://bluerobot.com/web/layouts/layout1.html

[synth]

Yeah I do agree with you that CSS is somewhat complicated, especially to people new to it, moving up from table-based layouts. It's hard not to fall back to tables when the going gets tough sometimes.

Well I guess we're in a transitional period now - maybe in around two or three years (could be even less) we'll see much better CSS support in all devices. Until the day comes...

I'll leave this problem as "unsolvable" for the time being. Shown to others too and they still can't figure out how to do it without hoping for support on the min-height and max-height attributes. I don't have a draft copy of the page handy now, so there. Case closed

Have a good day everyone.