Stretch DIV question

Hi there

I really want both the left and right DIV to stretch depending on which is longest. At present if the right is longer than the left, then the left stretches ok. But if I make the left longer than the right, then I need a new method of stretching.

Any ideas?

Also, when I view the site in Mozilla, at present, the left DIV is only as high as the right, even though it should be longer.

Any ideas?

Cheers

Andy

******************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

function adjust()
     {
     hgt=document.getElementById('right').offsetHeight;
     document.getElementById('left').style.height=hgt+'px';
     }

window.onload=adjust;
window.onresize=adjust;

</script>
<style>
body
{
      margin: 0px;
      padding: 0;
      text-align:center;/* center layout in ie5 and 5.5. */
}

#header
{
      width: 760px;
      height: 100px;
      background-color: #F18181;      
}

#container
{
      width: 760px;
      background-color: #FFFFFF;
            
}

#left
{
      float: left;
      width: 100px;
      background-color: #258A67;
      
}
#right
{
      float: right;
      width: 660px;
      background-color: #253A8A;
            
}
#footer
{
      width: 760px;
      height: 100px;
      background-color: #F18181;      
}
</style>
</head>

<body>

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

<div id="container">
  <div id="left">
    left<BR>
    left<BR>
    left<BR>
    left<BR>
    left<BR>
    left<BR>
    left<BR>
    left<BR>
  </div>
  <div id="right">
    right<BR>
    right<BR>
  </div>
  <div style="clear:both;"></div>
</div>

<div id="footer">footer</div>

</body>
</html>
Colly321Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
Hi Andy,

What we need to do is assign the container an offset height, and then just stretch both div's to fit.

I've modified your code a little to bring it closer to standards compliance:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

function adjust()
{
      hgt=document.getElementById('container').offsetHeight;
      document.getElementById('left').style.height=hgt+'px';
      document.getElementById('right').style.height=hgt+'px';
}

window.onload=adjust;
window.onresize=adjust;

</script>

<style type="text/css">
body
{
      margin: 0;
      padding: 0;
      /* center layout in ie5 and 5.5. */
      text-align:center;
}

div
{
      /* reset the text alignment, as the divs will inherit the text-center rule above... */
      text-align:left;
}

#header
{
      /* the correct way to center a div */
      width: 760px;
      margin:0 auto;
      height: 100px;
      background-color: #F18181;    
}

#container
{
      width: 760px;
      margin:0 auto;
      background-color: #FFFFFF;
}

#left
{
      float: left;
      width: 100px;
      background-color: #258A67;
}

#right
{
      float: right;
      width: 660px;
      background-color: #253A8A;
}

#footer
{
      clear:both;
      width: 760px;
      height: 100px;
      margin:0 auto;
      background-color: #F18181;    
}

.clearer
{
      clear:both;
      line-height:0;
      font-size:0;
      height:1px;
      background-color: #F18181;
}

</style>
</head>

<body>

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

<div id="container">

      <div id="left">
            left<BR>
            left<BR>
            left<BR>
            left<BR>
            left<BR>
            left<BR>
            left<BR>
            left<BR>
      </div>

      <div id="right">
            right<BR>
            right<BR>
      </div>

      <div class="clearer">&nbsp;</div>

</div>

<div id="footer">footer</div>

</body>
</html>


Thanks,
Sean

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Colly321Author Commented:
Hi Sean

Thanks for that.

When you say the correct way to centre a DIV, do you mean the margin: 0 auto; part? What does the auto word do?

Also, in the clearer, when we do clear: both; what does this mean? Is it stopping whatever comes next from floating?

Cheers

Andy
0
seanpowellCommented:
Hi Andy,

>> When you say the correct way to centre a DIV, do you mean the margin: 0 auto; part? What does the auto word do?
Yes :-)

margin: 0 auto means, literally:

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;

Since both the left and right values are auto, they must be equal to each other. And hence the broswer puts the div in the center of the page.
Let's assume you had a 500 wide div in a 1000 wide screen: it would be margin: 0 250px. It's the same thing as margin: 0 auto, just different terminology to keep us confused.

>> Also, in the clearer, when we do clear: both; what does this mean? Is it stopping whatever comes next from floating?

Technically all you need is clear:left, meaning do "not" put anything on the left of the div - which means it now has to go "below" the container div to satisfy that requirement. On the off-chance that circumstances change with the setup of the page, we want to make sure that nothing will ever be on the right of the div either (perhaps a secondary footer below the first one with a copyright notice, different background, etc. ) So, clear:both will satisfy that requirement as well.

Does that help Andy?

Sean
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Colly321Author Commented:
Hi Sean

Yes that clears a couple of points.

My only problem, is that although your modified code works exactly how I want it to in Mozilla, it keeps crashing when I test the page in IE!!!

I have tried my old example, which although does not do what I want it to, it still appears in IE.

I have done a system reset and it still occurs, so I am wondering if it is something with the JavaScript?

Have you any ideas?

Andy
0
seanpowellCommented:
Yes, have to run out to some meetings - will be back...

Sean
0
Colly321Author Commented:
Hi Sean

It was the JavaScript:

window.onload=adjust;
window.onresize=adjust;

So I have only called the function throught the body onload statement. This has meant that the test page functions perfectly in both browser windows.

I now have my template sorted for future reference.

Thanks for your time

Andy
0
seanpowellCommented:
Hi Anday,

Sorry about that :-(
I had seen that before and had forgotten to modify how the code was called ...

Thanks, and best of luck with the site.
Sean
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.