I've been trying to implement the 2-column fluid layout (http://www.dynamicdrive.com/style/la...2-fluid-fixed/).
The problem is, the 2 columns are of different height. Normally this would not be a problem, as I could use the JavaScript equal-height plug-in (as stated on that page). However, my columns also have rounded edges as follows:

<style>

.mainrcontainertop, .mainrcontainerbottom{
display:block;
background:#464646;
}
.mainrcontainertop *{
display: block;
height: 1px;
overflow: hidden;
background:#D8D8D8;
}
.mainrcontainerbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#D8D8D8;
}
.mainrtop, .mainrbottom{
display:block;
background:#D8D8D8;
}
.mainrtop *, .mainrbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#D8D8D8;
}
.mainr1{margin: 0 5px}
.mainr2{margin: 0 3px}
.mainr3{margin: 0 2px}
.mainr4{margin: 0 1px; height: 2px}
</style>

Followed by
<b class="mainrcontainertop"><b class="mainr1"></b> <b class="mainr2"></b> <b class="mainr3"></b> <b class="mainr4"></b></b>

and

<b class="mainrcontainerbottom"><b class="mainr4"></b> <b class="mainr3"></b> <b class="mainr2"></b> <b class="mainr1"></b></b>

immediately after the start of the div tag, and just before the end respectively. Naturally, the equal height solutions are just work-arounds that fill in the column colour, without actually displacing the content, so the bottom rounded corner bit still appears at the end of the text rather than at the very bottom of the column. Is there any way to fix this?