I have created a simple page with 2 columns. In IE it works fine. When content id added to either the right/ left column the #main wrapper expands to the same height.
The problem is in Firefox, when content is added the left/ right divs just overlap the #main wrapper which cannot even be seen.
You can see what I mean:
http://www.the-photography-studio.co.uk/testpage.html
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test page</title>
<style type="text/css">
<!--
body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.7em; background-image:url(images/00-tile.gif); background-repeat:repeat; margin:0;}
#wrapper{width:750px; margin:0; margin:auto; border:2px solid #504f4f;}
#main{width:750px; background:#ffffff;}
.mainleft{width:475px; border-right-color:#B7CFF9; border-right-style:dashed; border-right-width:1px; background-color:#CCCCCC; float:left}
.mainright{width:274px;background-color:#003399; float:right;}
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<div class="mainleft">
This<br />
is<br />
some<br />
sample<br />
text<br />
<br />
<br />
<br />
<br />
<br />
More text <br />
</div><!--maiinleft-->
<div class="mainright">
d<br />
l<br />
l<br />
l<br />
</div>
</div><!--main-->
</div><!--wrapper-->
</body>
</html>