Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Clemmons, NC
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS height prop doesn't work as expected

    I am trying to define two DIVs that will both be as tall as the tallest element. However, the DIV that contains both of these elements needs to be able to expand with content.

    The simplified HTML is as follows:

    Code:
    <html>
    <body>
    <div id="wrapper">
    <div id="menu"></div>
    <div id="content"></div>
    </div>
    </body>
    </html>
    What CSS can I use to make both the menu and the content DIVs the same height? The following code almost works, except that the wrapper DIV does not expand with content:

    Code:
    html, body {
    height: 100%;
    }
    
    #wrapper {
    float: left;
    height: 100%;
    }
    
    #menu {
    float: left;
    min-height: 100%;
    }
    
    #content {
    float: left;
    min-height: 100%;
    }
    Changing the wrapper's 'height' tag to 'min-height' breaks the whole thing.

    Any thoughts? Can you help me? I appreciate your help!

  • #2
    New Coder
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    53
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Try putting some content in your div's. Then in your wrapper's css block:
    height:auto;

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Clemmons, NC
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is content inside of the DIVs on the page I'm coding. I was just trying to simply things.

    Setting the wrapper's height tag to auto breaks the page again. The menu and content DIVs revert to their minimum heights. I need them to be the same height...

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    #wrapper isn't expanding because both the divs contained within it are floated. To make #wrapper extend to include these:

    Code:
    #wrapper {
    float: left;
    height: 100%;
    overflow:auto
    }
    The overflow:auto will clear the float (in all browsers except IE7 and less). The height setting will give the element the IE only "hasLayout" property and hence clear the float in these browsers.

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Clemmons, NC
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's closer, SB65 -- thanks!

    But now, I the wrapper is 100% of the browser window height, and if my content extends past 100%, I get a new scrollbar -- much like an inline frame.

    What I want is for the wrapper to use only the amount of space necessary -- from 10% to 200% (and beyond) of the browser window height. And I want the two DIVs inside to maintain 100% of the wrapper's height. It's really perplexing me.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    OK, then just remove the height to give:

    Code:
    #wrapper {
    float: left;
    overflow:auto
    }
    IE7 and less will still be OK as the float property will also give "hasLayout".

  • #7
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Clemmons, NC
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm beginning to think that CSS can't do what I'm telling it to do. Because that's not it, either.

    I'm adept at numerous programming languages, and I can pick up new languages without any problems whatsoever. Why the heck is CSS so hard?!?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I think you are after faux columns.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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