View Full Version : Auto resize DIV in Javascript - see example #Newbie help#

02-04-2007, 09:34 AM
Hi there

I'm a newbie to Javascript, so bear with me!

am attempting to make a DIV resize automatically using Javascript.
Why you ask?

Well, I have a CSS driven website: http://www.realbabyguide.co.uk/ which has left, right and centre sections. Unless the middle section is populated with enough content, the lower border crashes into the left and right sections. I want to control the DIV height of the main section.

I have written the code and it works in IE7, but not in Firefox.
Removing the Doctype enables it to run in FF.
I validated the code and it passed.

Here it is in action: http://www.realbabyguide.co.uk/div%20heights.html

I suspect my code is at fault...
Any ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<title>A Test</title>
<style type="text/css">

font-size: 16px;
padding: 10px;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #cc0000;
font-size: 16px;
padding: 10px;
width: 50%;
border-width: 1px;
border-style: solid;
border-color: #cc0000;


<script language="javascript" type="text/javascript">
function getOff()
x = document.getElementById('inner');
return x.offsetHeight;
function changeOff(amount)
amount = 600-getOff();
var y = getOff();
x.style.height = y + amount;

<div class="outer">
<div id="inner">

<h1>This script resizes my "inner" DIV height to 600px - the current height.</h1>

<p>However, although it works in IE7 (haven't tried other IE versions), it will not work in Firefox (<br />
Removing the Doctype enables it to work in Firefox, but screws up IE7 as it renders the page in Quirks mode.<br />
The page
<a href="<A href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.realbabyguide.co.uk%2Fdiv%2520heights.html">validates.</a">http://validator.w3.org/check?uri=http%3A%2F%2Fwww.realbabyguide.co.uk%2Fdiv%2520heights.html">validates.</a>
<br />
Any ideas?

</div><!-- Close inner DIV -->

</div><!-- Close outer DIV -->
<a href="javascript:changeOff()">Click here and the DIV should resize</a>

02-04-2007, 01:06 PM
x.style.height = y + amount+'px';

02-04-2007, 06:16 PM
Vwphillips, thanks a million, you sorted it out!
It's so helpfull to have a forum like this, thanks again.