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 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Fluid DIV height: Left Menu column not matching up with Right Content

    Please HELP!

    I have a vertical menu bar on the left, and the main content of the site on the right. The content height will vary from time to time, depending on what's placed there. I need the left menu DIV to be fluid in height, so that it extends down to match the height of the content, and fills with the background.

    Here's my site:

    http://bossteel.com/index09-9.html

    As you can see, the left menu section is either too long (in IE), or too short in other browsers such as FF, Safari, Netscape.

    What am I doing wrong?

    Any help to solve this mystery is greatly appreciated!
    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello puffnstuff,
    Try putting that background image somewhere else.
    Like this -
    Code:
    /* Use the below for paragraphs that need to be left and right justified */
    p
    {text-align: justify;
    padding-left: 5px;
    line-height: 100%;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    background: url(images/gradient151.jpg) repeat-y left;
    }
    
    #maincontent{
    margin-left: 145px; /*Set left margin to LeftColumnWidth*/
    background-image: url(images/gradient695.gif);
    height: 100%;
    }
    
    #leftmenubar{
    float: left;
    height: 100%;   /* supposed to make it fluid height to match bottom of container */
    width: 145px; /*Width of left menu bar*/
    margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
    }
    
    
    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    puffnstuff (11-11-2009)

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you so much, Excavator! I never would have thought to put the nav background THERE.


    Actually, when I tried what you suggested, it made things worse. So then I removed the repeat-y command, and now it works!

    Thanks again.


  •  

    Posting Permissions

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