Você tem duas opções. A primeira é colocar a DIV filho em position:absolute e deixar a pai em position:relative como está, parar que assim o top:30% funcione, ou usar margin-top para fazer o espaçamento superior sendo relative. "Top:valor" só funciona quando o elemento referente é absolute.

Esta ai em anexo o código, só baixar!

Abraços!

HTML

<!--GERAL-->
<div id="geral">
	<!--GERAL-->
	<div id="geral2">
    	   <!--HEADER-->
	   <div id="header">
        	
           </div>
           <!--Fim:HEADER-->
           <!--MENUNAV-->
	   <div id="MenuNav">
        	
           </div>
           <!--Fim:MENUNAV-->
           <!--BLOCO01-->
	   <div id="bloco01">
        	
           </div>
           <!--Fim:BLOCO01-->
           <!--CONTEUDO-->
	   <div id="conteudo">
               <!--HEADER02-->
               <div id="header02">
                
               </div>
               <!--Fim:HEADER02-->
           </div>
           <!--Fim:CONTEUDO-->
           <!--BLOCO02-->
	   <div id="bloco02">
        	
           </div>
           <!--Fim:BLOCO02-->
           <!--FOOTER-->
	   <div id="footer">
        	
           </div>
           <!--Fim:FOOTER-->
	   </div>
           <!--Fim:GERAL2-->
</div>
<!--GERAL-->

CSS

body {
	padding:0;
	margin:0;
}
#geral {
	width:100%;
	margin:0 auto;
}
#geral2 {
	width:980px;
	margin:0 auto;
}
#header {
	width:980px;
	height:150px;
	background:#00b7fb;
}
#MenuNav {
	width:980px;
	height:50px;
	background:#4f9900;
}
#bloco01 {
	float:left;
	width:200px;
	height:800px;
	background:#800000;
}
#conteudo {
	float:left;
	width:580px;
	height:800px;
	background:#ffae00;
}
#header02 {
	width:580px;
	height:100px;
	background:#ffe2a3;
}
#bloco02 {
	float:left;
	width:200px;
	height:800px;
	background:#800000;
}
#footer {
	clear:both;
	width:980px;
	height:100px;
	background:#007cc2;
}

Pronto! Do jeito que você quer.
Qualquer dúvida estamos ai.
Abraços!