Link to home
Start Free TrialLog in
Avatar of HaydnH
HaydnH

asked on

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

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.
SOLUTION
Avatar of dorward
dorward

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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
Avatar of HaydnH
HaydnH

ASKER

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.
Avatar of HaydnH

ASKER

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

Errrr without even =/
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  
Avatar of HaydnH

ASKER

errrr isn't that still javascript???
Avatar of HaydnH

ASKER

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!
Yeah, you're right....Excuse me for having tunnelvision ;-)

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

MaB
...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
...and set

#menu    {
              height: 100%;
              }
Avatar of HaydnH

ASKER

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.
>>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
Avatar of HaydnH

ASKER

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>
That's nice :-)

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

ASKER

" 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.
Avatar of seanpowell
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>
Avatar of HaydnH

ASKER

"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.
Avatar of HaydnH

ASKER

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

ASKER

...And the content div stretches too far to the right for some reason without the float in IE....
It shouldn't - there's nothing there for it to choke on...
What do you mean too far right? It should stretch the full width of the screen...
Avatar of HaydnH

ASKER


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.
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...
Avatar of HaydnH

ASKER

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...
CSS is a many splendored thing - and everything can effect everything :-)

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

ASKER

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!!!
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.
Avatar of HaydnH

ASKER

"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 =/
Avatar of HaydnH

ASKER

OK - anybody got any point suggestions on this 1???
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of HaydnH

ASKER

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

Haydn.