height:100% em div Float

Ola pessoal estou criando meu site aonde tem o conteúdo que esta definido apenas o width pois o heith ele é automático já que o conteúdo vai variar dentro do conteudo tem o content que é aonde vão montar os artigos e tem o sidebar como mostra na foto:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i47.tinypic.com/6qkwe8.jpg&key=c062fd167050aea1878a949e667b3d3ef8cb2a369ce7a43e108c78318abdb6ae" alt="6qkwe8.jpg" />

a sidebar ele deve seguir a altura do content (dos artigos) ou seja o certo é eu utilizar o height:100%; mais não funciona acaba ficando Asim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i47.tinypic.com/25f7e9s.jpg&key=d69c91a800c7df0fc9993247cc987e0a214fa06fff6e432916bd9473f1eb7aec" alt="25f7e9s.jpg" />

o certo éra ela acompanhar o artigos(content)

html:

<div id="conteudo">

 <div id="content"><!---Content-->
	<center><h1 style="font-family: 'Droid Sans', sans-serif; font-weight:normal;">Aqui fica os artigos <br /> 1<br /> 2<br /> 3<br /> 4</center>
	</div><!---Fim Content-->

	<div id="sidebar"><!---Sidebar-->
 <center><h1 style="font-family: 'Droid Sans', sans-serif; font-weight:normal;">Aqui fica a Sidebar <br /> </h1></center>
 </div><!---Fim sidebar-->
</div>

css:

#conteudo{
	width:1000px;
	display:table;
	margin:0 auto;
	background-color:rgb(255,255,255);
	border:1px solid rgb(204,204,204);
}

#content {
	width:680px;
	overflow:hidden;
	float:left;
	padding:10px;
}

#sidebar {
	width:298px;
	background-color:#F0F0F0;
	float:right;
	border-left:1px solid #CCCCCC;
	height:100%;
}