Вылазит div

[xTODx]

Всем привет, думаю частый вопрос, но решение я так и не нашёл.

Вот шаблон

<div class="wrapper">	<header class="header">		<div id="logo">           <a href="/" style="color: #CCC;">           <img id="logoimg" src="<?=$site['shablon']?>img/logo.gif" />        	<!—<h2><?=!$site['title'];?>  <?=!$site['losung'];?></h2> <!— название сайты—> <!— Лозунг—>        </a>       </div>	</header><!-- .header--><div class="line"></div>	<div class="middle">		<div class="container">			<div class="upbar"> <?php up(); ?></div><?php 				require "{$config->APP_PATH}/views/vmaterial.php";					 ?> 		</div><!-- .container-->		<aside class="leftbar">			 <?php left() ;?>		</aside><!-- .left-sidebar -->	</div><!-- .middle-->	<footer class="footer">		<div id="leftfooter">   <?php       echo $site['contitul'];	?>       </div>   <div id="rightfooter">   <?php mobi();?>   </div>	</footer><!-- .footer --></div><!-- .wrapper -->

А вот CSS:

html{width: 100%;height: 100%;}body {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;width: 100%;height: 100%;}/*Шаблон*/.wrapper{ width: 80%;margin: 5px 0 5px 10%;height: 100%;}.header{ width:100%;height:135px;background:#999999;}.line{ background:url(img/line.jpg);height:5px;position: relative;background-size:contain;}#logo { width: 100%;height: 100%;}.middle{ background:#999;height:100%;}.container{float: right;width: 80%;}.leftbar {float: right;width: 20%;background: #B5E3FF;} 

.leftbar выходит за пределы по высоте. Если поставлю height: 100% то содержимое этого блока спокойно выходит, но блок заканчивается в нужном месте. Нужно что бы растягивало и подгоняло .container

Edited March 19, 2014 by xTODx