2 Replies Latest reply on Sep 11, 2007 12:49 PM by dpriskorn

    Any way to match DIV heights?

    dpriskorn
      I have two DIVs side by side using float left and right. My DIV on the left is a navigation DIV and has a thin solid border running down the right side and on the top. There is a banner above both DIV's and below is the main content area. My problem is that when I put enough content in the Content DIV the border on my Navigation DIV doesn't reach the bottom. Is there anyone to have the DIV's resize based on the larger height, or at very least a minimum height?
        • 1. Re: Any way to match DIV heights?
          Level 7
          dpriskorn wrote:

          > I have two DIVs side by side using float left and right. My DIV on the left is
          > a navigation DIV and has a thin solid border running down the right side and on
          > the top. There is a banner above both DIV's and below is the main content area.
          > My problem is that when I put enough content in the Content DIV the border on
          > my Navigation DIV doesn't reach the bottom. Is there anyone to have the DIV's
          > resize based on the larger height, or at very least a minimum height?
          >


          A couple of ways to do this:

          Use javascript. The link below provides the script and a tutorial

          http://www.projectseven.com/tutorials/css/pvii_columns/index.htm


          or

          You can wrap the floated <divs> in a 'wrapper' <div> and use a repeating
          background image on the 'wrapper' <div>. Make the image as wide as your
          'navigation' <div> and give it a border on the right side, then just use
          css to apply it as a background image to the 'wrapper' <div>. This
          method will create a line which will grow bigger in depth or shorter in
          depth as the content grows in your 'content' <div>

          If you choose this method then you need to clear the floats also to
          ensure the 'wrapper' wraps itself around the two floated <divs>. After
          your last closing floated </div> tag add the code:

          <br style="clear: both;">

          or a seemingly better solution these days add overflow: hidden; to the
          wrapper css like

          #wrapper {
          overflow: hidden;
          width: 700px;
          }

          I believe this method requires that a width is declared for the <div>

          • 2. Re: Any way to match DIV heights?
            dpriskorn Level 1
            awesome, thanks. I tried to grab a different javascript that claimed to fix the problem but didn't. This one works wonders. Thanks again.