Javascript-форум - блок с авто высотой

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - блок с авто высотой (https://javascript.ru/forum/dom-window/43026-blok-s-avto-vysotojj.html)

блок с авто высотой

Здравствуйте не пойму почему у меня блок #content_container не растягивается по высоте хотя высота у него указана авто? и блок #second_post_main выходит за его пределы, хотя должен просто его увеличивать?

<div class="wrapper">

	<header class="header">
	</header >
<div class="middle">
       <div class="container">
             <main class="content">
                    <div id="content_container">
                           <div id="first_post_main">	
                            </div>
                            <div id="second_post_main">
                            </div>
                    </div>
              </main><!-- .content -->
        </div><!-- .container-->
       <aside class="left-sidebar">
       </aside><!-- .left-sidebar -->
</div><!-- .middle-->

</div><!-- .wrapper -->

<footer class="footer">
</footer><!-- .footer -->

.wrapper {
	width: 1000px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


/* Header
-----------------------------------------------------------------------------*/
.header {

}


/* Middle
-----------------------------------------------------------------------------*/
.middle {
	margin-top:-40%;
	width: 100%;
	padding: 0 0 100px;
	position: relative;
}
.middle:after {
	display: table;
	clear: both;
	content: '';
}
.container {
	width: 100%;
	float: left;
	overflow: hidden;
	
}
.content {
	padding: 0 0 0 375px;
}
#content_container{
top:-40px;
position:relative;
width:625px;
height:auto;
min-height:200px;
z-index:2;
}
#first_post_main{
position:relative;
background:#eee;
width:550px;
min-height:300px;
margin:0 auto;
top:50px;
}
#second_post_main{
position:relative;
background:#eee;
width:550px;
height:auto;
min-height:300px;
margin:0 auto;
top:50px;
}
/* Left Sidebar
-----------------------------------------------------------------------------*/
.left-sidebar {
margin-top:20px;
	float: left;
	width: 375px;
	margin-left: -100%;

}



/* Footer
-----------------------------------------------------------------------------*/
.footer {
	width: 1000px;
	margin: -100px auto 0;
	height: 100px;
	background: #BFF08E;
	position: relative;
}

Цитата:

Сообщение от imediasun1

почему у меня блок #content_container не растягивается по высоте хотя высота у него указана авто? и блок #second_post_main выходит за его пределы, хотя должен просто его увеличивать?

Ответ очевиден! :D

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#content_container {
	/* top:-40px; */
	position:relative;
	width:625px;
	height:auto;
	min-height:200px;
	z-index:2;
	border: 1px solid red;
}
#second_post_main {
	position:relative;
	background:#eee;
	width:550px;
	height:auto;
	min-height:300px;
	margin:0 auto;
	/* top:50px; */
	border: 1px solid green;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content_container">
	<div id="second_post_main">
	</div>
</div>
</body>
</html>

Сам такое наваял... А обвиняешь бедный second_post_main. :cray:

объясните причем здесь top?
мне надо посты опустить на 50 пикселей вниз, а margin-top:опускает родителя, как же это сделать по другому
неужели только яваскриптом увеличивать блок #content_container на 50пикселей?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content_container {
	/* top:-40px; */
	position:relative;
	width:625px;
	height:auto;
	min-height:200px;
	z-index:2;
	border: 1px solid red;
padding-top: 50px;
}
#second_post_main {
	position:relative;
	background:#eee;
	width:550px;
	height:auto;
	min-height:300px;
	margin:0 auto;
	/* top:50px; */
	border: 1px solid green;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content_container">
	<div id="second_post_main">
	</div>
</div>
</body>
</html>

Цитата:

Сообщение от imediasun1

объясните причем здесь top?

В твоем варианте, он смещает блок относительно его "поточной" позиции...
Решение:
- не делать так
- растянуть родителя самостоятельно на то смещение

по этой же теме еще один случай

<div id="content_container">
          <div class="child_container">

           </div>
</div>

#content_container{
position:relative;
width:645px;
height:auto;
}
.child_container{
 position:relative;
 display:inline-block;
  margin:20px;
  width:250px;
  height:432px;
  cursor:pointer;
  float:left;
}

Из за float:left в дочернем блоке родитель не растягивается по высоте, что делать?

Цитата:

Сообщение от imediasun1

что делать?

Перестать говнокодить. :D

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#content_container{
	position:relative;
	width:645px;
	height:auto;
	overflow: hidden;
	border: 1px solid green;
}
.child_container{
	position:relative;
	display:inline-block;
	margin:20px;
	width:250px;
	height:432px;
	cursor:pointer;
	float:left;
	border: 1px solid red;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content_container">
	<div class="child_container">
		Служба Яндекс.Рефераты предназначена для студентов 
		и школьников, дизайнеров и журналистов, создателей 
		научных заявок и отчетов — для всех, кто относится 
		к тексту, как к количеству знаков.
	</div>
</div>
</body>
</html>