Forum Moderators: not2easy
I have a difficult issue, I didn't get any solution at csscreator.com or on IRC, so I really hope you can help me!
My issue regards two <div>s floating next to each other. I need the left <div> to stretch so it's as high as the right one.
The "faux columns"-trick doesn't work, since I have variable backgrounds etc (I don't know the background-color in advance). In addition to this, the "faux columns"-trick doesn't actually stretch a <div>, it only makes the <div> look stretched.
This is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style="border: solid 1px green;">
<div style="border: solid 1px red; float: left; width: 100px; height: 100%;">How do I stretch this "div" so it gets at least as high as the right one? Setting the height to 100% doesn't seem to work.</div>
<div style="border: solid 1px blue; float: right; width: 100px; height: 300px;">right content with variable height</div>
<div style="clear:both; border: solid 1px black;">footer div</div>
</div>
</body></html>
Do you think I need to do this using javascripts, or can it be done with CSS?
Thanks in advance!
If your containing div has a height specified, then you can set both divs to height:100%. If it doesn't, then you can't (as far as I'm aware).
I wrote a small script to fix this problem which I use from time to time. It's not very pretty (the script) but it works. I saw a better one just the other day, though I forget where (I'm no expert).
Here's what I wrote :
function fixH()
{
if (!(document.getElementById('leftcolumn')) )
{return false;}
else
{var lh=document.getElementById('leftcolumn').offsetHeight;
var rh=document.getElementById('rightcolumn').offsetHeight;
document.getElementById('rightcolumn').style.height=(lh>rh)? lh+"px" : rh+"px";
document.getElementById('leftcolumn').style.height=(rh>lh)? rh+"px" : lh+"px";
}
}
window.onload=function(){fixH()}
(Replace 'leftcolumn' and 'rightcolumn' with the names of your divs).
I hope this helps a little.
Btw, you noticed that I'd set an explicit height on the right <div>. That was just to make it higher than the left <div>. It might have been more correct to write the code like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style="border: solid 1px green;">
<div style="border: solid 1px red; float: left; width: 100px; height: 100%;">How do I stretch this "div" so it gets at least as high as the right one? Setting the height to 100% doesn't seem to work.</div>
<div style="border: solid 1px blue; float: right; width: 100px;">right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height<br />right content with variable height</div>
<div style="clear:both; border: solid 1px black;">footer div</div>
</div>
</body></html>
