I have a very very small understanding of JavaScript. I'd like to make the two divs equal height based on the height of the taller one (and then expand their container to fit that, but I need to get this part working first). I have tried everything I could possibly find with CSS and the problem only exists in IE7.
First it told me that document.getElementById for content and sidebar (I only tried one at a time) were null. All I could find about that is that it should be after the page is loaded by physically placing it after the content or using window.onload I have tried various combinations of that and then that with nameless functions, named functions, functions triggered by onclick or onmouseover but still nothing happens.
As is, it no longer gives me the null error, but nothing happens and it doesn't give any errors.
Is there something I'm missing here?
<body>
<div id="contentwrapper" role="presentation">
<div id="content" role="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur, risus vitae ultrices pellentesque, urna massa semper purus, a rutrum neque nunc venenatis tortor. Suspendisse viverra tortor eget nisl elementum scelerisque id id tortor. Vestibulum quis mi non purus gravida tincidunt sed sed elit. Phasellus iaculis commodo erat, pellentesque egestas lectus feugiat non. Maecenas nulla neque, semper vel sem sed, volutpat venenatis ipsum.</p>
</div>
<div id="sidebar" role="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur, risus vitae ultrices pellentesque, urna massa semper purus, a rutrum neque nunc venenatis tortor.</p>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var contentheight = document.getElementById("content").clientHeight;
var sidebarheight = document.getElementById("sidebar").clientHeight;
/*if(contentheight != sidebarheight) {
if(sidebarheight > contentheight) {
document.getElementById("content").style.height = sidebarheight;
}else{*/
document.getElementById("sidebar").style.height = contentheight;
/* }
}
}*/
}
</script>
</body>
(And yes, most of that is commented out because I'm just trying to get it to do something)
Also the CSS in case that has any effect on it:
#contentwrapper {
width: 500px;
border: 1px solid black;
height: 100%;
background: #DDF;
position: relative;
}
#content {
width: 300px;
display: block;
background: #FDD;
display: inline;
position: absolute;
left: 0;
}
#sidebar {
width: 200px;
display: block;
background: #DFD;
display: inline;
position: absolute;
right: 0;
}