We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

CSS - match height of menu div with content div??

HaydnH
HaydnH asked
on
Medium Priority
1,371 Views
Last Modified: 2020-04-13
Hi All,

I'm trying to create a 2 column layout where the height of the left hand div stretches to match the height of the right hand div's contents. Could somebody explain how I can do this?

Here's an example to explain what I mean:

<HTML>
  <HEAD>
    <TITLE>Some Title</TITLE>

    <STYLE>
      HTML, BODY {
        max-width: 750px;
        min-width: 530px;
        margin: 0px;
        padding: 0px;
        background-color: #FFFFFF;  
        color: #000000;  
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
      }

      #header {
        border-bottom: #000000 2px solid;
        width: 100%;
        height: 75px;
        background-color: #3333CC;
      }

      #menu {
        float: left;
        border-right: #000000 2px solid;
        width: 100px;
        background-color: #CC3333;
      }

      #content {
        float: left;
      }

    </STYLE>

  </HEAD>

  <BODY>
    <DIV ID="header">
      header
    </DIV>

    <DIV ID="menu">
      menu
    </DIV>

    <DIV ID="content">
      Content line 1<BR>
      Content line 2<BR>
      <---- Menu DIV should stretch down here due to content length!
    </DIV>

  </BODY>
</HTML>



Haydn.
Comment
Watch Question

Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
MaB

Commented:
Hi HaydnH,

Read another Q where COBOL DINOSAUR tipped about a solution that would look like this in your code:

<HTML>
  <HEAD>
    <TITLE>Some Title</TITLE>

    <STYLE>
      HTML, BODY {
        max-width: 750px;
        min-width: 530px;
        margin: 0px;
        padding: 0px;
        background-color: #FFFFFF;  
        color: #000000;  
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
      }

      #header {
        border-bottom: #000000 2px solid;
        width: 100%;
        height: 75px;
        background-color: #3333CC;
      }

      #menu {
        float: left;
        border-right: #000000 2px solid;
        width: 100px;
        background-color: #CC3333;
       
      }

      #content {
        float: left;
      }

    </STYLE>
    <script type="text/javascript">

    function sizeRows() {
    H = Math.max(document.getElementById('content').offsetHeight);
    document.getElementById('content').style.height = H+'px';
    }

</script>
</head>

  </HEAD>

  <BODY onload="sizeRows();">
    <DIV ID="header">
      header
    </DIV>

    <DIV ID="menu">
      menu
    </DIV>

    <DIV ID="content">
      Content line 1<BR>
      Content line 2<BR>
      <---- Menu DIV should stretch down here due to content length!
    </DIV>

  </BODY>
</HTML>

Try that out and see if it works for you.

BR MaB.
MaB

Commented:
OOPS sorry:
    <script type="text/javascript">

    function sizeRows() {
    H = Math.max(document.getElementById('content').offsetHeight);
    document.getElementById('content').style.height = H+'px';
    }

</script>

Should be:

    <script type="text/javascript">

    function sizeRows() {
    H = Math.max(document.getElementById('content').offsetHeight);
    document.getElementById('menu').style.height = H+'px';
    }

</script>

MaB

Author

Commented:
I've seen the "using a background image" method before - but surely there has to be a nicer solution. Lets say that I wanted to allow the site's users to personalise the sites colours, I don't want 16 million odd images on my server for each colour. OK - this is unlikely to happen, but, I'm beginning to think that using tables for the layout might be a better solution than CSS... YUCK!

Re: the javascript solution - unfortunately this has to be workable with javascript =(

Haydn.

Author

Commented:
"unfortunately this has to be workable with javascript =("

Errrr without even =/
MaB

Commented:
Then you should be able to do this:

document.getElementById('menu').style.height = Math.max(document.getElementById('content').offsetHeight)' px';
 
I'm not sure if this works in a separate stylesheet though. You might need to add it in your page.

MaB  

Author

Commented:
errrr isn't that still javascript???

Author

Commented:
Oh, and a quick note on the background image method,

Lets assume I have a max-width property set for the content div, effictively I would have 3 columns, menu, content, and blank... using the background image method would set the blank column to the menu colour - it won't allow it to be white (or other chosen colour).

Haydn - getting frustrated!
MaB

Commented:
Yeah, you're right....Excuse me for having tunnelvision ;-)

MaB
MaB

Commented:
The only way to do it without javascript (AFAIK) is fixed height or putting the divs in tablecells as you already suggested.

MaB
MaB

Commented:
...or it might work to put div in divs....

#1    {
        width: 80%;
        }

<div id="1">
    <DIV ID="menu">
      menu
    </DIV>

    <DIV ID="content">
      Content line 1<BR>
      Content line 2<BR>
      <---- Menu DIV should stretch down here due to content length!
    </DIV>
</div>

MaB
MaB

Commented:
...and set

#menu    {
              height: 100%;
              }

Author

Commented:
I tried that, unfortunately the menu div's height won't inherit the hieght of the container div for some reason (GRRR!).

I've just been trying another solution by placing the content div first, with a 100px left border of the correct colour, then placing the menu div over the top... which kind of works, but unfortunately the width of the content div (100%) + the border width (100px) makes the content div width wider than the header div! Also it removes the possibility of have a border between the menu and the content div.

Oh well - thought I had it for a second, back to the drawing board I guess =(

I thought CSS was meant to make life easier???? =/

Haydn.
MaB

Commented:
>>I thought CSS was meant to make life easier???? =/

LOL

It seems like anything that's intended to make life easier just gives you a new set of unexplored problems....

MaB

Author

Commented:
o.O Actually, it is possible to use the border-left of the content div to fill the menu bar's color!!! And it works quite nicely!

Here's an example using some foo text for the content:

<HTML>
  <HEAD>
    <TITLE>Some Title</TITLE>

    <STYLE>
      HTML, BODY {
        max-width: 750px;
        min-width: 530px;
        margin: 0px 7px 0px 0px;
        padding: 0px;
        background-color: #FFFFFF;  
        color: #000000;  
        font-family: Arial, Helvetica, sans-serif;
        text-align: justify;
        font-size: 14px;
      }

      #header {
        float: left;
        border-bottom: #000000 2px solid;
        margin: 0px;
        width: 100%;
        height: 75px;
        background-color: #3333CC;
      }

      #menu {
        position: absolute;
        top: 77px;
        left: 0;
        padding: 0px;
        width: 100px;
        background-color: #CC3333;
      }

      #content {
        float: left;
        margin: 0px;
        padding: 15px;
        border-left: #CC3333 100px solid;
      }

    </STYLE>
  </HEAD>

  <BODY>

    <DIV ID="header">
      Some header
    </DIV>

    <DIV ID="content">
      Insert long foo text here<br>
      And watch the menu scroll down<br><br><br><br><br><br>
      <-----
    </DIV>

    <DIV ID="menu">
      menu
    </DIV>

  </BODY>
</HTML>
MaB

Commented:
That's nice :-)

MaB
MaB

Commented:
I was totally locked to the problem of making the meny div higher, didn't think of the possibility to stretch the content div....

Author

Commented:
" That's nice :-)"

Thanks =)

The only draw back that I can see atm is that you can't use border-left for it's real purpose on the content div. Not really a biggie though - perhaps I'll find some more problems soon =/

Haydn.
Top Expert 2004

Commented:
Hi Haydn - I realise I'm late stepping in :-)

The left border option is a good one in your specific scenario - the only issues would be the setup of your CSS - getting rid of the float on the header and the content - as they're not necessary and may cause you problems later on.

Also - you should try and go with a strict doctype if you can - again to save you some problems...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some Title</title>

<style type="text/css">

html, body
{
        /* IE ignores the next two rules */
        max-width: 750px;
        min-width: 530px;
        margin: 0 7px 0 0;
        padding: 0;
        background-color: #FFF;  
        color: #000;  
        font-family: Arial, Helvetica, sans-serif;
        text-align: justify;
        font-size: 14px;
}

#header
{
        border-bottom: 2px solid #000;
        margin: 0;
        height: 75px;
        background-color: #3333CC;
}

#menu
{
        position: absolute;
        top: 77px;
        left: 0;
        padding: 0;
        width: 100px;
        background-color: #CC3333;
}

#content
{
        margin: 0;
        padding: 15px;
        border-left: 100px solid #CC3333;
}

</style>
</head>
<body>

<div id="header">
  Some header
</div>

<div id="content">
  Insert long foo text here<br>
  And watch the menu scroll down<br><br><br><br><br><br>
  <-----
</div>

<div id="menu">
  menu
</div>

</body>
</html>

Author

Commented:
"Also - you should try and go with a strict doctype if you can - again to save you some problems..."

I always use the strict doc type, I just didn't include it in the example code. Although I've always meant to ask why it's usualy split over 2 lines (like they state on w3c)... having it all on 1 line works fine and looks nicer imho... i.e:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


"getting rid of the float on the header and the content - as they're not necessary and may cause you problems later on."

You could be right, I don't see any problems using float with the layout I'm using, but as you say, it's not necessary.

Thanks for the comments,

Haydn.

Author

Commented:
o.O the "float: left" is required on the content div, otherwise IE chokes.

Author

Commented:
...And the content div stretches too far to the right for some reason without the float in IE....
Top Expert 2004

Commented:
It shouldn't - there's nothing there for it to choke on...
Top Expert 2004

Commented:
What do you mean too far right? It should stretch the full width of the screen...

Author

Commented:

BODY {
  max-width: 750px;
  margin: 0px 7px 0px 0px;
}

Although IE doesn't know what to do with the max-width attribute, theres still a 7px margin to the right of the page.

Haydn.
Top Expert 2004

Commented:
I understand that - there should be a 7px margin to the right of the content div as well.
What version of IE are you using - it should not extend beyond that 7px gap...

Author

Commented:
IE 5.5 in the office and 6 at home - currently testing on 5.5. I think the problems happen without the float due to the fact I have some float div's in the content div already...
Top Expert 2004

Commented:
CSS is a many splendored thing - and everything can effect everything :-)

Sorry Haydn - I assumed you were testing the exact code above...

Author

Commented:
I experienced a very strange IE problem when playing about with removing the floats by the way. The page also has a footer div spanning both columns. Without the float's a ~3px gap was created between the footer and content div ONLY if I scrolled the page slowly - scrolling quickly didn't render the gap - how wierd is that!!!
Top Expert 2004

Commented:
I wish I could say very weird, but nothing suprises me anymore :-(

There is definitely a reason though in your code somewhere - usually to do with absolute positioning.

Author

Commented:
"usually to do with absolute positioning."

The only absolute positioned div is the menu, unfortunately this has to be like it to fit over the contents border =/

Author

Commented:
OK - anybody got any point suggestions on this 1???
Top Expert 2004
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Points awarded as nobody said "gimme the damn points" for a change ;P

Haydn.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.