[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1304
  • Last Modified:

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>
0
Colly321
Asked:
Colly321
  • 4
  • 3
1 Solution
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now