Xavier,
Here's a testing page with a script where you can add space to the left
or the right column and experiment with how it works. the css will
cause the div boxes to push the footer down, not over-lap. the padding,
borders & color can be eliminated if you wish; they are added just for
ease of seeing the different boxes and how they change the layout when
the script is applied. (this was designed with dtd transitional for
xhtml). same behaviors show in both msie and ffox. -Jim
----------------------------------------------------------
<head><title> 2 column floating divs</title>
<style type="text/css">
body{ margin:0px; padding:0px; background-color:cyan; }
#col1{
width:47%; float:left; display:inline; height:100%;
background-color:yellow; color:green; font-family: verdana;
font-size:8pt;
text-align:justify; padding:5px; border:2px green dashed;
}
#col2 {
width:47%; float:left; display:inline; height:100%;
background-color:green; color:yellow; font-family: verdana;
font-size:8pt;
text-align:justify; padding:5px; border:2px yellow dashed;
}
#footer{
width:97%; float:left; display:inline; height:30px;
background-color:purple; color:yellow; font-family: verdana;
font-size:8pt;
text-align:center; padding:5px; border:2px white groove;
}
</style>
</head>
<body >
<button onClick="addText('col1')">Add text to Floating Div Column
1</button>
<button onClick="addText('col2')">Add text to Floating Div Column
2</button>
<hr/>
<div id="col1">
pretend a bunch of text is here
<hr/><br/><hr/><br/><hr/><br/><hr/><br/>
<hr/><br/><hr/><br/><hr/><br/><hr/><br/>
</div>
<div id="col2">
pretend a bunch of text is here
<hr/><br/><hr/><br/><hr/><br/><hr/><br/>
<hr/><br/><hr/><br/><hr/><br/><hr/><br/>
</div>
<div id="footer">
your page © 2006<br/>
</footer>
<script type="text/javascript" >
function addText(id){
var txt = " ";
for(x=0;x<=20; x++){
txt +="<hr/>a bunch of text<br/>";
}
document.getElementById(id).innerHTML = txt;
}
</script>
</body>
