The problem is in the layout, namely with the parent div, which does not accept the height of the content. I read the solutions on the Internet, but nothing came up with the list.

HTML:

<!-- NOMENCLATURA !--> <div id="goods_list"> <ul> <li> <div class="g_img"></div> <p class="g_name"> АК47 </p> <p class="g_desc"> Наиболее смертельна стрельба короткими и точными очередями. Покрашен вручную на спортивный мотив. </p> <div class="buy_button"> <p id="text"> 2370р. - подробнее </p> </div> <div class="border"></div> </li> <li> <div class="g_img"></div> <p class="g_name"> АК47 </p> <p class="g_desc"> Наиболее смертельна стрельба короткими и точными очередями. Покрашен вручную на спортивный мотив. </p> <div class="buy_button"> <p id="text"> 2370р. - подробнее </p> </div> <div class="border"></div> </li> <li> <div class="g_img"></div> <p class="g_name"> АК47 </p> <p class="g_desc"> Наиболее смертельна стрельба короткими и точными очередями. Покрашен вручную на спортивный мотив. </p> <div class="buy_button"> <p id="text"> 2370р. - подробнее </p> </div> <div class="border"></div> </li> <li> <div class="g_img"></div> <p class="g_name"> АК47 </p> <p class="g_desc"> Наиболее смертельна стрельба короткими и точными очередями. Покрашен вручную на спортивный мотив. </p> <div class="buy_button"> <p id="text"> 2370р. - подробнее </p> </div> <div class="border"></div> </li> <li> <div class="g_img"></div> <p class="g_name"> АК47 </p> <p class="g_desc"> Наиболее смертельна стрельба короткими и точными очередями. Покрашен вручную на спортивный мотив. </p> <div class="buy_button"> <p id="text"> 2370р. - подробнее </p> </div> <div class="border"></div> </li> </ul> </div> <!-- / NOMENCLATURA !-->

CSS:

 /* NOMENCLATURA START. */ #goods_list { width: 788px; margin: 26px 0 0 -34px; border-left: 2px solid #e6e6e6; } #goods_list ul { padding: 0; margin: 0; } #goods_list li { list-style: none; float: left; width: 197px; height: 321px; background: #fff; border-top: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6; box-sizing: border-box; } #goods_list li .border { width: 100%; height: 6px; background: #29c3f4; } #goods_list .g_img { background: url(../images/g_1.png) no-repeat; margin: 0; width: 195px; height: 95px; } .g_name { color: #ff6631; text-align: center; font-weight: bold; margin-top: 18px; } .g_desc { color: #333; font-style: italic; text-align: center; height: 92.75px; } #goods_list .buy_button { color: #31a3ff; width: 153px; height: 35px; margin: 0 auto; border: 1px solid #d6d6d6; border-radius: 45px; margin-bottom: 20px; margin-top: 5px; } #goods_list .buy_button #text { margin-top: 9px; text-align: center; } /* NOMENCLATURA END. */
  • 2
    you have internal divs with float, they are not included in the size calculation. add at the end of <div style="clear:both"></div> . Must earn - splash58
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

3 answers 3

You need to add clearfix.

 #goods_list:before, #goods_list:after { content:""; display:table; } #goods_list:after { clear:both; } #goods_list { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

    Try to put the box-sizing property in the child elements: border-box

      add float: left; parent unit

       #goods_list { width: 788px; margin: 26px 0 0 -34px; border-left: 2px solid #e6e6e6; float:left; }
      • Doesn't my answer solve the problem? I after all checked, the #goods_list block was stretched on height. Or did I misunderstand the question? - Evgeny Kupchak