Divs, торчащий из родительского div

Я проектирую сайт корзины покупок, где у меня есть несколько родительских divs, а также дочерние divs следующим образом. Проблема - это те divs, где я установил высоту: auto не расширяется, когда возрастает контент для ребенка. Нет, в моем случае мне нужно было добавить еще один набор (3) держателей элементов (уже он имеет 3 и подходит для контента) внутри элементов div, но когда я делаю это, выпрыгивает из родительского div. Пожалуйста помоги мне с этим.Divs, торчащий из родительского div

Мой HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>diluks eCommerce - Home</title> 
<link href="scripts/style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div class="container"> 
    <div class="level1"> 
    <div class="profile-bar"></div> 

    </div> 
    <div class="level2"> 
    <div class="logoarea"><img src="img/logo-bar.png" width="1000" height="100" /></div> 

    </div> 
    <div class="level3"> 
    <div class="body-content"> 
     <div class="side-bar"></div> 
     <div class="nav-menu"></div> 
     <div class="image-slider"><img src="img/main-img.png" width="785" height="220" /></div> 
     <div class="seperate-space"> 
     <div class="separate-title"><a class="bold-captions">Latest Picks</a></div> 


     </div> 
<div class="items"> 
    <div class="item-holder"> 
     <table align="center" width="256px" cellpadding="0px" cellspacing="0px"> 
      <tr> 
       <td class="item-info" align="center" height="34px">Item name</td> 
      </tr> 
      <tr> 
       <td class="item-info" align="center" height="230px"><img src="img/sunflowers.png" width="256" height="230" /></td> 
      </tr> 
      <tr> 
       <td class="item-info" align="center" height="34px">$30</td> 
      </tr> 
      <tr> 
       <td class="item-info" align="center" height="35px">Button</td> 
      </tr> 
     </table> 
    </div> 
    <div class="item-holder"> 
     <table align="center" width="256px" cellpadding="0px" cellspacing="0px"> 
      <tr> 
       <td class="item-info" align="center" height="34px">Item name</td> 
      </tr> 
      <tr> 
       <td class="item-info" align="center" height="230px"><img src="img/treecard.png" width="256" height="230" /></td> 
      </tr> 
      <tr> 
       <td class="item-info" align="center" height="34px">$30</td> 
      </tr> 
      <tr> 
       <td class="item-info" align="center" height="35px">Button</td> 
      </tr> 
     </table> 
    </div> 
    <div class="item-holder"> 
     <table align="center" width="256px" cellpadding="0px" cellspacing="0px"> 
      <tr> 
       <td class="item-info" align="center" height="34px">Item name</td> 
      </tr> 
      <tr> 
       <td class="item-info" align="center" height="230px"><img src="img/3-flowers.png" width="256" height="230" /></td> 
      </tr> 
      <tr> 
       <td class="item-info" align="center" height="34px">$30</td> 
      </tr> 
      <tr> 
       <td class="item-info" align="center" height="35px">Button</td> 
      </tr> 
     </table> 
    </div> 


</div> 
    </div> 


    </div> 
    <div class="level4"> 
    <div class="footer-area"> 
     <div class="space-line"></div> 
    </div> 


    </div> 
</div> 
</body> 
</html>

Мой CSS Style Sheet

@charset "utf-8"; 
.container { 
    height: auto; 
    width: 100%; 
} 
body{ 
    margin:0px; 
    padding:0px; 
    background-color:#F2F2F2; 

    }.container .level1 { 
    height: 35px; 
    width: 100%; 

} 
.container .level2 { 
    height: 100px; 
    width: 100%; 

} 
.container .level3 { 
    height: auto; 
    width: 100%; 
    min-height:685px; 
} 
.level3 .body-content { 
    height: 100%; 
    width: 1000px; 
    min-height:685px; 
    margin:auto; 
} 
.body-content .side-bar { 
    float: left; 
    height: 100%; 
    width: 200px; 
    min-height:685px; 
    background-color:#CACACA; 

} 
.body-content .nav-menu { 
    float: left; 
    height: 35px; 
    width: 800px; 

    background-color:#CACACA; 
} 
.body-content .items { 
    float: left; 
    height: auto; 
    width: 785px; 
    min-height:335px; 
    padding-left:15px; 
    padding-bottom:15px; 
    padding-top:15px; 
    padding-right:0px; 
    position:relative; 


} 
.logoarea { 
    height: 100px; 
    width: 1000px; 
    margin:auto; 
    border-bottom-style:solid; 
    border-bottom-width:1px; 
    border-bottom-color:#CACACA; 
} 
.profile-bar { 
    height: 35px; 
    width: 1000px; 
    margin:auto; 
    border-bottom-style:solid; 
    border-bottom-width:1px; 
    border-bottom-color:#666; 
} 
.image-slider { 
    float: left; 
    height: 220px; 
    width: 785px; 
    padding-left:15px; 
    padding-bottom:15px; 
    padding-top:15px; 
    padding-right:0px; 

} 
.level4 { 
    height: auto; 
    width: 100%; 
    min-height:150px; 
} 
.space-bar{ 
    height: 15px; 
    width: 100%; 
    } 
.space-line{ 
    height: 15px; 
    width: 100%; 
    border-top-style:solid; 
    border-top-width:1px; 
    border-top-color:#666; 
    } .footer-area { 
    height: auto; 
    width: 1000px; 
    margin:auto; 
    min-height:150px; 
} 
.seperate-space { 
    float: left; 
    height: 35px; 
    width: 785px; 
    padding-left:15px; 
} 
.separate-title { 
    float: left; 
    height: 28px; 
    width: 780px; 
    background-color:#CACACA; 

    padding-top:7px; 
    padding-left:5px; 

} 
.items .item-holder { 
    float: left; 
    height: 335px; 
    width: 260px; 
} 
.item-info{ 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:14px; 
    color:#333; 
    } 
.bold-captions{ 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:16px; 
    font-weight:bold; 
    color:#333; 
    }

JSFiddle Demo

источник

2014-02-19 Dilukshan Mahendra

Можете ли вы поместить свой код в jsfiddle? Чтобы мы могли помочь вам лучше. – BhushanK

Попробуйте использовать 'overflow: hidden'. – helderdarocha

Переполнение: автоматический ответ ниже работает, но за считанные минуты прочитайте это сообщение и ознакомьтесь с поплавками и очистите их. http://www.impressivewebs.com/clearing-floats-why-necessary/ – keithwyland

Я думаю, что это то, что вы хотите: http://jsfiddle.net/bortao/XpSXK/

Сначала пришлось использовать clearfix на level3 так плавали содержание содержится там (ваш главный вопрос).

Тогда возникла проблема с боковой панелью: она всегда заканчивалась на минимальной высоте. поэтому установка его на height:100% не влияет. Кроме того, если после этой минимальной высоты есть контент, он будет выровнен слева от боковой панели.

Итак, я привел side-bar за пределы body-content, чтобы все содержимое выровнялось справа от боковой панели.

И, наконец, чтобы сделать остальную боковую панель того же цвета, установите цвет фона level3 на темный (такой же, как на боковой панели), и body-content фоновой свет, такой же, как на корпусе.

источник

2014-02-19 05:53:14 ariel

Спасибо, ariel, этот работает !!! –

Добавить overflow: auto

.container .level3 { 
    height: auto; 
    width: 100%; 
    min-height: 685px; 
    overflow: auto; 
}

источник

2014-02-19 04:45:03

Я бы порекомендовал OP прочитать это сообщение, чтобы получить сплошную ручку, что означает очистить поплавки: http://www.impressivewebs.com/clearing-floats-why-necessary/ – keithwyland

sidebar все еще на минимальной высоте – ariel

@Mahesh Sapkal Он добавляет горизонтальную полосу прокрутки, а не то, что мне нужно –

Добавить поплавком: слева все ваши уровня дивы

.level1,.level2,.level3,.level4{ 
     float:left; 
    }

источник

2014-02-19 05:17:08 Sarath

. Он толкает нижний колонтитул правильно и добавляет держателей элементов, как я ожидал, но содержание тела остается с той же высотой, где тогда элементы div выходят из содержимого тела, которое является родителем из них, любые предложения? –

включают библиотеку Jquery и добавьте следующий код яваскрипта \t \t ' ' – Sarath

Divs, торчащий из родительского div

ответ

Смежные вопросы