Zewnętrzny DIV nie rozszerza się z wewnętrznymi DIV

Question

Zawijam moją stronę wewnątrz głównego opakowania div, ale zewnętrzna div nie rozszerza się z wewnętrznym elementem div.

Chcę wysokość głównego div zewnętrznym main-wrapper rośnie z zawartością strony, która się nie dzieje z jakiegoś powodu

próbuję dowiedzieć się ten problem na jakiś czas, ale jak dotąd bez powodzenia.

mam skonfigurować jsFiddle Example

chciałbym pomóc w tym zakresie.

próbka Struktura HTML

<!-- main Container --> 
<div class="main-wrapper"> 
    <!-- Header --> 
    <div class="header-wrapper"></div> 
    <!-- Header --> 
    <div class="content-wrapper"> 
     <!-- Content Page--> 
     <!-- banner image wrapper --> 
     <div class="top-image-wrapper"></div> 
     <!-- banner image wrapper --> 
     <!-- page content wrapper --> 
     <div id="page-content-area" class="page-content-area"> 
      <div id="pg-intro-area" class="pg-intro-area"> 
       <div class="page-title"> 
        <h5>Page Title </h5> 

       </div> 
       <div class="page-text"></div> 
      </div> 
      <div class="pg-right-bar-wrapper"></div> 
     </div> 
     <!-- page content wrapper --> 
     <!-- Content Page--> 
    </div> 
    <div class="footer-wrapper"></div> 
</div> 
<!-- main Container --> 

CSS Podobne

html, body,form { height:100%; background-color:gray; } 
body { 
    font-family: Verdana,"Trebuchet MS",Arial,sans-serif; 
    -webkit-font-smoothing: antialiased; 
    font-size: 11px; 
    line-height: 16px; 
    height:100%; margin:0;padding:0; border:0; 
    color:#656565; 
} 
p 
{ 
    text-align:justify; 
    color:#687074; 
} 
hr 
{ 
    background-color: #ccc; 
    border: medium none; 
    height: 1px; 
    margin-bottom: 12px; 
    margin-top: 12px; 
} 
h5 /* for page title*/ 
{ 
font-size:15px; 
color:#028F41; 
margin:5px 0; 
} 
.page-title-lbl 
{ 
font-size:15px; 
color:#028F41; 
padding-left:105px; 
background-image:url("../images/title-bar.png"); 
background-repeat:no-repeat; 
text-shadow:0 0 0px #F6F6F6; 
} 
img 
{ 
border:0px 
} 

a { 
    color: #028F41; 
    text-decoration: none; 
} 

a:hover, 
a:focus { 
    text-decoration: underline; 
} 

input { 
    border: 1px solid #ccc; 
    font-size: 12px; 
    height: 20px; 
    line-height:20px; 
    vertical-align:middle; 
    padding-left: 5px; 
    color:#656565; 
} 
.btn 
{ 
    background-color: #0A8F36; 
    border: 0 none; 
    color: #FFFFFF; 
    font-size: 12px; 
    font-weight:bold; 
    height: 24px; 
    line-height:24px; 
} 

.margin5-0 
{ 
    margin:5px 0; 
} 
.margin10-0 
{ 
    margin:10px 0; 
} 
.margin20-0 
{ 
    margin:20px 0; 
} 
.padding5-0 
{ 
    padding:10px 0; 
} 
.padding10-0 
{ 
    padding:10px 0; 
} 
.padding20-0 
{ 
    padding:20px 0; 
} 
.margin10-000 
{ 
    margin:10px 0 0 0; 
} 
.margin00-5-0 
{ 
    margin:0 0 5px 0; 
} 
.margin00-10-0 
{ 
    margin:0 0 10px 0; 
} 
.margin20-000 
{ 
    margin:20px 0 0 0; 
} 
.margin00-20-0 
{ 
margin:0 0 20px 0; 
} 

.main-wrapper 
{ 
    width:1000px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
margin:0px auto 0px auto; 
background-color:#fff; 
padding-left:10px; 
padding-right:10px; 
} 
.header-wrapper 
{ 
height:130px; 
background-color:red; 

} 
.search-sm-wrapper 
{ 
    float:right; 
    width:250px; 
    height:100px; 
} 
.search-wrapper 
{ 
    text-align:right; 
    width:250px; 
    height:25px; 
} 
.txtSearch 
{ 
    float: right; 
    height: 20px; 
    width: 150px; 
    border-right:0px; 
} 
.btn-search 
{ 
float:right; 
} 

.language-wrapper 
{ 
    float:right; 
    text-align:right; 
    width:250px; 
    height:20px; 
} 
.language-link 
{ 
    color:#656565; 
} 
.sm-wrapper 
{ 
    float:right; 
    width:250px; 
    height:25px; 
} 
.menu-wrapper 
{ 
    height:30px; 
    width:1000px; 
    background-color:yellow; 
} 

.content-wrapper 
{ 
float:left; 
height:auto; 
} 
.footer-wrapper 
{ 
    float:left; 
    width:1000px; 
} 
.brand-logos 
{ 
    height:39px; 
} 
.marquee 
{ 
    float:left; 
    overflow:hidden; 
    height:39px; 
    width:1000px; 
    border:0px solid #f9f9f9; 
} 
.footer-banner 
{ 
    float:left; 
    height:96px; 
    width:1000px; 
} 
.footer-menu 
{ 
    display:none; 
} 
.footer-copyright 
{ 
    float:left; 
    height:20px; 
    width:1000px; 

} 





.top-image-wrapper 
{ 
    height:240px; 
    margin-top:6px; 
    background-color:#f5f5f5; 
} 


/* home page*/ 
.hp-intro-area 
{ 
    float:left; 
    width:570px; 
    margin-right:30px; 
} 
.hp-right-bar-wrapper 
{ 
    float:left; 
    width:400px; 
} 
.tabs-wrapper 
{ 
    margin:10px 0; 
    background-color:#E5E5E5; 
    height:210px; 
    overflow:hidden; 
} 
.tab-name-wrapper 
{ 
    width:400px; 
    height:30px; 
    line-height:30px; 
    background-color:#fff; 
    margin-bottom:10px; 
    overflow:hidden; 
} 
.tab-content-wrapper 
{ 
margin:0px 10px; 
} 
.hp-tab-image 
{ 
    float:left; 
    width:100px; 
    padding-right:10px;  
} 

/* Page */ 
.page-content-area 
{ 
    width:100%; 
    height:100%; 
} 
.page-sub-menu 
{ 
    width:100%; 
    height:23px; 
    padding:0px 0px; 
    background-color:blue; 
} 
.pg-intro-area 
{ 
    float:left; 
    width:570px; 
    margin-right:30px; 
} 
.pg-right-bar-wrapper 
{ 
    float:left; 
    width:400px; 
} 

Answer 1

.main-wrapper{ 
    overflow:auto; 
    /* other styles here */ 
} 

lub czasem po prostu pomaga wyczyścić pływaków właściwie:

.main-wrapper:before, 
.main-wrapper:after { 
    content : ""; 
    display : table; 
} 
.main-wrapper:after { 
    clear : both; 
} 

Answer 2

Wystarczy dodać:

display: block;

i

float: left;

do klasy .main-wrapper, więc będzie wyglądać następująco:

.main-wrapper 
{ 
     width:1000px; 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
    margin:0px auto 0px auto; 
    background-color:#fff; 
    padding-left:10px; 
    padding-right:10px; 

    display: block; 
    float: left; 
}