SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flexible DIV height?

    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"?

  2. #2
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried this?

    Code:
    #div {
          ...;
          height: auto;
          ...;
         }
    if thew java thingy will take 900px anyway, the rest should just 'grow' with the amount of content.
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  3. #3
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I did think of using
    Code:
    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).
    Last edited by synth; Nov 22, 2002 at 13:16.

  4. #4
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still looking for an answer, hope someone knows.. otherwise its back to the bad solution. hehe.

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, looked into it earlier but you know the thing with CSS2...

    Thanks for all the help people!

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by synth; Nov 25, 2002 at 14:45.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •