Forum Moderators: open

Message Too Old, No Replies

resize div height

         

akademik

1:28 am on Dec 3, 2006 (gmt 0)

10+ Year Member



Hello, I've wrote small javascript that resize height of the div tags. It works perfectly in FF and Opera, but IE has something against it. After resizing height, IE also resize width, and I don't want to change width. Can somebody help, please? Here is the code:

<script type='text/javascript'>

window.onload = adjustLayout;
function adjustLayout(){

var leftColumn = document.getElementById("leftColumn");
var rightColumn = document.getElementById("rightColumn");

var leftColumnHeight = leftColumn.offsetHeight;
var rightColumnHeight = rightColumn.offsetHeight;

if(leftColumnHeight > rightColumnHeight) {
var maxHeight = leftColumnHeight;
} else {
var maxHeight = rightColumnHeight;
}

alert('left ' + leftColumnHeight + ' right ' + rightColumnHeight);

leftColumn.style.height = maxHeight - 2 + 'px';
rightColumn.style.height = maxHeight - 2 + 'px';
}
</script>

Here is the HTML:

<body>
<div id="leftColumn">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
</div>

<div id="rightColumn">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
</div>
</body>

penders

4:26 pm on Dec 3, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Are you explicitly setting the width of your DIV columns in your CSS?

akademik

6:21 pm on Dec 3, 2006 (gmt 0)

10+ Year Member



Here is the part of CSS file related with these div tags settings:

#leftColumn{
float:left;
margin: 0;
padding: 0;
width: 600px;
border: 1px solid #000000;
/*background-color: #FFFFCC;*/
}
#rightColumn{
background:#fff;
margin-left: 600px;
margin-right:0px;
border:1px solid #000;

voice-family: "\"}\"";
voice-family: inherit;
margin-left: 601px;
margin-right:0px;
}
html>body #rightColumn {
margin-left: 601px;
margin-right:0px;
}