Div и height

[Flancy]

Проблема заключается вот в чем, есть код, представлю ниже, в нем такая штука - если переполнить какой либо из блоков внутри #in_content, они расширяются, НО уходят за рамки div'а #in_content. Причем я расcчитывал на то что этот блок будет расширяться по мере расширения блоков внутри него по вертикали.Прошу помощи и кому не сложно, попробуйте сначала попробовать сами, а то я много способов перепробовал.

HTML:

<div id="content">
 <div id="in_content">
  <div id="foto">
   <div class="foto_s"><?php echo '<img class="fotos" src="'.$myrow['avatar'].'" />'; ?><form action="update_foto.php" method="post" style="display:none"></form>
   </div></div>
   <div id="info">
    <div class="info">
     <p>asdasd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
    </div>
    <div class="info_2">
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
     <p>Govonkasasdasdasdasdasdd</p>
    </div>
   </div>
 </div>
</div>

CSS:

*{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
html{
height:100%;
}
body{
height:100%;
background:#f4f4f4 url(../img/bg.gif) repeat top left;
}
#content{
	height:100%;
}
#content #in_content{
	height: 100%;
	padding-top:40px;
	width:60% !important;
	min-width:800px;
	border:1px solid black;
	margin:0 auto;
}
#content #in_content #foto{
	-moz-box-shadow:1px 1px 6px #333;
    -webkit-box-shadow:1px 1px 6px #333;
    box-shadow:1px 1px 6px #333;
	float:left;
	width:30%;
	min-width:260px;
	min-height:260px;
	border:1px solid black;
	margin-left:1%;
	margin-top:1%;
}
#content #in_content .foto_s .fotos{
	max-width:100%;
	max-height:100%;
	background-color:#FFF;
	display: block;
    margin-left: auto;
    margin-right: auto;
	width: 100%; 
	height: 100%;
}
/*Out foto*/
#content #in_content #info{
	background-color:#FFF;
	-moz-box-shadow:1px 1px 6px #333;
    -webkit-box-shadow:1px 1px 6px #333;
    box-shadow:1px 1px 6px #333;
	float:right;
	width:64%;
	min-width:260px;
	min-height:260px;
	border:1px solid black;
	margin-left:1%;
	margin-top:1%;
	margin-right:1%;
}
#content #in_content #info .info{
	width:100%;
	height:50%;
	min-width:130px;
	min-height:130px;
}
#content #in_content #info .info_2{
	width:100%;
	height:50%;
	min-width:130px;
	min-height:130px;
}

Edited November 25, 2012 by Flancy

[Flancy]

Разве ни у кого нет даже подозрений ?

[mrnobody]

И что с этим делать?

Edited November 24, 2012 by mrnobody

[Vadimka]

не вижу твоего кода но могу предположить почему так.у блок #in_content скорее всего фиксированая высота, то есть если что то внутри этого блока превысит эту высоту то оно выйдет за рамки просто а если у #in_content есть overflow: hidden то все что выходит за рамки будет скрыто , тебе просто не надо в таком случае задавать ему высоту и поставить overflow: hidden (это на случай если внутри есть плавающие блоки) тогда он будет у тебя расширятся в высоту по содержимому внутри

[Flancy]

Извините, теперь код видно

[Flancy]

Жду помощи ребят

[Bizon4ik]

Я что то невижу что бы что то куда то вылазило http://jsfiddle.net/Bizon4ik/MCPc7/

[Flancy]

Я что то невижу что бы что то куда то вылазило http://jsfiddle.net/Bizon4ik/MCPc7/

Вверху блок который, у него стоит auto, если поставить 100%, то он растягивается на всю страницу, но не дальше

[Flancy]

Ну же, кто нибудь знает?