As far as I know, the only way of actually achieving equal height columns without weird hacks or javascript is by using the display properties table and table-cell. I don't know from what version IE handles this, but I suppose you'd have to handle at least IE8 since that's the max version for user's of Windows XP which is still used be a sufficient number of people. Should IE have coverage for table and table-cell, that's what I'd go with.
But you can make columns look as if they are equal in height without being so, which may be enough.
#container_fullwidth
{
clear: left;
float: left;
width: 400px;
background: #ccc;
overflow: visible;
padding: 0;
margin: 0;
}
#container_halfwidth
{
float: left;
width: 400px;
right: 200px;
position: relative;
background: #aac;
overflow: visible;
padding: 0;
margin: 0;
}
#col1
{
float: left;
/* width + padding + margin has to match half width above */
width: 180px;
/* depends on width, padding and margin */
left: 195px;
padding: 10px;
margin: 0;
position: relative;
overflow:hidden;
}
#col2
{
float:left;
width: 180px;
left: 200px;
padding: 10px;
margin: 0;
position:relative;
overflow:hidden;
}
<div id="container_fullwidth">
<div id="container_halfwidth">
<div id="col1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="col2">
Not so much text. Not so much text
</div>
</div>
</div>
<div style="clear: left;"></div>
