SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem stretching...

    No, my back's not gone again.

    Rather I'm a bit bemused as to why I can't get the left hand menu to 'fill down' to the base of the page on this css based design I'm working on.

    http://217.155.3.246/csstest.html

    I've tried various combinations of percentages, but nothing seems to have the desired effect.

    This is the relevant parts of the css:

    Code:
    #leftnav {
      margin: 0 0 0 0 ;
      margin-left: auto ;
      margin-right: auto ;
      padding: 10px ;
      border: 0 0 0 0 ;
      border-right: 1px solid #253D6A ;
      background-color: #f8f8f8 ;
      float: left ;
      width: 119px ;
      height: 100% ;
    }
    
    #main {
      margin: 0 0 0 0 ;
      margin-left: auto ;
      margin-right: auto ;
      padding: 10px ;
      border: 0 0 0 0 ;
      background-color: transparent ;
      float: left ;
      width: 608px ;
    }
    Thanks in advance for any help.

    Matt.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Matt,

    I have just in the past week decided to convert my sites to CSS layouts, so I am no expert for sure! In fact, I have the opposite problem... I have a column that wants to butt right against the bottom of the screen and I can't seem to figure out how to make it so that there is a space below it.

    Anyway, after viewing your source, I would say it is because the "leftnav" div is nested within the "frame" div and is only going as far down as it is allowed to by that div's style.

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had the same problem with my site. The content column was always longer than the menu column, so I used a combination of CSS and tables for my layout. The table drags down both columns, and the CSS is obviously for some formatting. Best practice, though? Mmm... questionable.

    BTW, your CSS could use a little condensing. Also, percentages are not valid values for height, which may be part of the reason why your column isn't stretching. Try: em, ex, px, in, cm, mm, pt, pc, etc.
    Code:
    #leftnav {
        background-color: #f8f8f8;
        border-right: 1px solid #253d6a;
        color: #000000;
        float: left;
        height: 100%; /* % for height is invalid */
        margin: 0 auto;
        padding: 10px;
        width: 119px;
    }
    
    #main {
        float: left;
        margin: 0 auto;
        padding: 10px;
        width: 608px;
    }

  4. #4
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mattjacob
    Also, percentages are not valid values for height, which may be part of the reason why your column isn't stretching. Try: em, ex, px, in, cm, mm, pt, pc, etc.
    Strange, http://www.w3schools.com/css/pr_dim_height.asp

    Originally posted by mattjacob
    BTW, your CSS could use a little condensing.
    I always do any optimisation at the end when I'm programming, just habit.

  5. #5
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, reading up a little more. The % height for a block element should be relative to the parent element. To check that my #frame element was flowing down to the bottom, I coloured it grey. Result, it was (yippee!!). So why wasn't the navbar filling up to 100% of this? Hmmm.

    So, I tried specifying a height for the frame, 400px. Bam! Result. The navbar jumped to fill 100% of the 400px frame. Only problem is that I don't want to specify an absolute height for my frame element.

    Dagnamit!
    Last edited by Mincer; Nov 5, 2002 at 05:32.

  6. #6
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put your left nav div INSIDE your main div, that way it stretches to fill it's parent

    You have:
    Code:
    <body>
      <div id="frame">
      <div id="header">
        <span id="logo"></span>
        <span id="squares"></span>
      </div>
      <div id="topbar"></div>
      <div id="leftnav">
      </div>
      <div id="main">
        <div id="rightfloat">
        </div>
    Lorem ipsum...
      </div>
      </div>
    </body>
    Try:
    Code:
    <body>
      <div id="frame">
      <div id="header">
        <span id="logo"></span>
        <span id="squares"></span>
      </div>
      <div id="topbar"></div>
      <div id="main">
      <div id="leftnav">
      </div>
        <div id="rightfloat">
        </div>
    Lorem ipsum...
      </div>
      </div>
    </body>
    Let me know how it goes.
    Last edited by fillup07; Nov 5, 2002 at 13:30.


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
  •