Solved

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

Posted on 2004-04-06
36
1,296 Views
Last Modified: 2008-01-09
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.
0
Comment
Question by:HaydnH
  • 16
  • 12
  • 7
  • +1
36 Comments
 
LVL 17

Assisted Solution

by:dorward
dorward earned 100 total points
ID: 10764557
0
 
LVL 7

Expert Comment

by:MaB
ID: 10764596
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.
0
 
LVL 7

Expert Comment

by:MaB
ID: 10764604
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
0
 
LVL 7

Expert Comment

by:MaB
ID: 10764623
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10764652
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.
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10764671
"unfortunately this has to be workable with javascript =("

Errrr without even =/
0
 
LVL 7

Expert Comment

by:MaB
ID: 10764679
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  
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10764719
errrr isn't that still javascript???
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10764813
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!
0
 
LVL 7

Expert Comment

by:MaB
ID: 10764833
Yeah, you're right....Excuse me for having tunnelvision ;-)

MaB
0
 
LVL 7

Expert Comment

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

MaB
0
 
LVL 7

Expert Comment

by:MaB
ID: 10764897
...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
0
 
LVL 7

Expert Comment

by:MaB
ID: 10764905
...and set

#menu    {
              height: 100%;
              }
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10765074
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.
0
 
LVL 7

Expert Comment

by:MaB
ID: 10765124
>>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
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10765274
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>
0
 
LVL 7

Expert Comment

by:MaB
ID: 10765319
That's nice :-)

MaB
0
 
LVL 7

Expert Comment

by:MaB
ID: 10765349
I was totally locked to the problem of making the meny div higher, didn't think of the possibility to stretch the content div....
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 8

Author Comment

by:HaydnH
ID: 10765455
" 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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10765518
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>
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10765602
"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.
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10765610
o.O the "float: left" is required on the content div, otherwise IE chokes.
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10765656
...And the content div stretches too far to the right for some reason without the float in IE....
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10765657
It shouldn't - there's nothing there for it to choke on...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10765667
What do you mean too far right? It should stretch the full width of the screen...
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10765688

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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10765729
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...
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10765952
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...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10765992
CSS is a many splendored thing - and everything can effect everything :-)

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

Author Comment

by:HaydnH
ID: 10766144
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!!!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10766371
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.
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10766393
"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 =/
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10776027
OK - anybody got any point suggestions on this 1???
0
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 200 total points
ID: 10776066
Well, you answered your own question:
http:Q_20944931.html#10765274

So technically, I would suggest a PAQ and Refund.

If you're feeling generous, than any way you want to dole them out is perfectly fine with me :-)

Thanks,
Sean
0
 
LVL 7

Accepted Solution

by:
MaB earned 200 total points
ID: 10781464
I totally agree with Sean.

BR MaB
0
 
LVL 8

Author Comment

by:HaydnH
ID: 10781518
Points awarded as nobody said "gimme the damn points" for a change ;P

Haydn.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now