left and right col same height after dynamically inserted content - html

Question

I have some html:
<div id="content">
<div id="leftCol"></div>
<div id="rightCol"></div>
</div>
css like:
#content {
position:absolute;
width:98%;
margin-left:1%;
margin-right:1%;
min-height: 100%;
height: 100%;
padding:0;
}
#leftCol {
position:absolute;
min-height:100%;
float:left;
width:60%;
overflow: hidden;
border-top:1px solid #acacac;
border-left:1px solid #dfdfdf;
border-right:1px solid #dfdfdf;
}
#rightCol {
float:right;
width:40%;
min-height:100%;
border-right:1px solid #dfdfdf;
border-top:1px solid #acacac;
}
When content is added to #leftCol the height 100% is only applied to the 100% when document is loaded. I have a system the dynamically inserts content into #rightContent.
I want to "syncronize" so #leftCol is same height #rightCol after insertion of content. Is this possible with pure css? I could of course use js to achieve this, but css would be nicer :-)

Answer 1

demo
#main {
display: table;
width: 500px;
}
#left, #right {
display: table-cell;
padding: 5px;
}
#left {
background: none repeat scroll 0 0 red;
width: 250px;
}
#right {
background: none repeat scroll 0 0 green;
}

Answer 2

Try this:
#content {
position:absolute;
width:98%;
margin-left:1%;
margin-right:1%;
min-height: 100%;
height: 100%;
padding:0;
display: table;
}
#leftCol {
display: table-cell;
width:60%;
overflow: hidden;
border-top:1px solid #acacac;
border-left:1px solid #dfdfdf;
border-right:1px solid #dfdfdf;
}
#rightCol {
display: table-cell;
width:40%;
min-height:100%;
border-right:1px solid #dfdfdf;
border-top:1px solid #acacac;
}

Answer 3

Fiddle link with css and HTML. In your css file you are using id but in html you are adding class.
*{
padding:0;
margin:0;
}
#content {
width:98%;
margin:1% 1%;
padding:0;
border:1px solid #999999;
display:table;
}
#leftCol {
width:58%;
padding:1%;
background-color:#99FFCC;
display:table-cell;
}
#rightCol {
width:38%;
padding:1%;
background-color:#CCCCCC;
display:table-cell;
}
<div id="content">
<div id="leftCol">
<p>Whether you're preparing a romantic valentine's dinner or having friends over to watch the big game, our meal planning guide can help.</p>
</div>
<div id="rightCol"><p>The right glass of wine or beer can turn a good meal into a great one. Let us help you take the mystery out of beer and wine shopping.</p></div>
</div>