débordement: mise en page automatique en chrome et firefox

Question

Pourquoi le overflow:auto; sur .pageContent briser la mise en page dans Chrome et Firefox? Cela fonctionne très bien dans Safari. Comment puis-je y remédier? Je l'ai ajouté de sorte que le clear:both; sur le h2 effacerait seulement le contenu et non l'ensemble .pageAttributes div aussi.

Here est le site.

On dirait que c'est le border-bottom sur .selected dans le menu qui le cause. Je ne sais toujours pas pourquoi.

Mise à jour - Test de cas jsfiddle

J'ai essayé overflow: visible; mais qui brise le h2.

HTML

<div class="page"> 
    <div class="pageAttributes"> 
     .pageAttributes 
    </div> 
    <div class="pageMenu"> 
     <div class="button">View</div> 
     <div class="button selected">Edit</div> 
     <div class="button">Talk</div> 
     <div class="search">Search:&nbsp;&nbsp; 
      <input type="text" id="searchItem"> 
     </div> 
    </div> 
    <div class="pageContent"> 
     <h2>header</h2> 
     .pageContent 
     <div class="pageFooter"></div> 
    </div> 
</div> 

CSS

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 

.page { 
    width: 1010px; 
    padding: 0 5px 0 5px; 
    margin: 0 auto 30px auto; 

} 

.pageAttributes { 
    float: left; 
    width: 245px; 
    height: 250px; 
    margin-bottom: 20px; 
    background-color: #ccc; 
} 

.pageMenu { 
    clear: right; 
    margin-left: 250px; 
    height: 25px; 
    margin-bottom: -1px; 
    border-bottom: 1px solid #a7d7f9; 
    padding-left: 1px; 
    padding-right: 1px; 
} 

.pageMenu .button { 
    float: left; 
    margin-left: -1px; 
    height: 24px; 
    border-top: 1px solid #a7d7f9; 
    border-left: 1px solid #a7d7f9; 
    border-right: 1px solid #a7d7f9; 
    padding-left: 15px; 
    padding-right: 15px; 
    text-align: center; 
    line-height: 25px; 
    font-family: sans-serif; 
    font-size: 13px; 
    cursor: pointer; 
} 

.pageMenu .button.selected { 
    background-color: white; 
    border-bottom: 1px solid white; 
    cursor: default; 
} 

.pageMenu .search { 
    float: right; 
    margin-right: -1px; 
    height: 24px; 
    border-top: 1px solid #a7d7f9; 
    border-left: 1px solid #a7d7f9; 
    border-right: 1px solid #a7d7f9; 
    padding-left: 15px; 
    padding-right: 15px; 
    text-align: center; 
    line-height: 25px; 
    font-family: sans-serif; 
    font-size: 13px; 
    cursor: default; 
} 

.pageContent { 
    position: relative; 
    border: 1px solid #a7d7f9; 
    margin-bottom: 5px; 
    padding: 5px; 
    background-color: white; 
    line-height: 1.5em; 
    overflow: auto; 
    clear: right; 
    margin-left: 250px; 
} 

.pageContent h2 { 
    margin-top: 25px; 
    margin-bottom: 3px; 
    font-size: 16px; 
    border-bottom: 1px dotted #CCC; 
    clear: both; 
} 

Answer 1

Essayez ce,

#articleSections{ 
    float: left; 
} 

et retirer le overflow: auto; de .pageContent

Answer 2

pour moi, il semble y avoir un problème flottant Wich je ne pouvais pas clairement entre les .button (s) et l'entrée de recherche. donc le positionnement pourrait être une solution comme celle

violon http://jsfiddle.net/LNMH9/3/

<style type="text/css"> 
html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 

.page { 
    position:relative; 

    width: 1010px; 
    padding: 0 5px 0 5px; 
    margin: 0 auto 30px auto; 
} 

.pageAttributes { 
    position:absolute; 
    left:0px; 
    top:0px; 
    width: 245px; 
    height: 250px; 
    margin-bottom: 20px; 
    background-color: #ccc; 
} 

.pageMenu { 

    margin-left: 250px; 
    height: 25px; 
    margin-bottom: -1px; 
    border-bottom: 1px solid #a7d7f9; 
    padding-left: 1px; 
    padding-right: 1px; 
} 

.pageMenu .button { 
    float: left; 
    margin-left: -1px; 
    height: 24px; 
    border-top: 1px solid #a7d7f9; 
    border-left: 1px solid #a7d7f9; 
    border-right: 1px solid #a7d7f9; 
    padding-left: 15px; 
    padding-right: 15px; 
    text-align: center; 
    line-height: 25px; 
    font-family: sans-serif; 
    font-size: 13px; 
    cursor: pointer; 
} 

.pageMenu .button.selected { 
    background-color: white; 
    border-bottom: 1px solid white; 
    cursor: default; 
} 

.pageMenu .search { 
    float: right; 
    margin-right: -1px; 
    height: 24px; 
    border-top: 1px solid #a7d7f9; 
    border-left: 1px solid #a7d7f9; 
    border-right: 1px solid #a7d7f9; 
    padding-left: 15px; 
    padding-right: 15px; 
    text-align: center; 
    line-height: 25px; 
    font-family: sans-serif; 
    font-size: 13px; 
    cursor: default; 
} 

.pageContent { 
    position: absolute; 
    width:748px; 
    border: 1px solid #a7d7f9; 
    margin-bottom: 5px; 
    padding: 5px; 
    background-color: white; 
    line-height: 1.5em; 
    overflow: auto; 
    clear: right; 
    margin-left: 250px; 
} 

.pageContent h2 { 
    margin-top: 25px; 
    margin-bottom: 3px; 
    font-size: 16px; 
    border-bottom: 1px dotted #CCC; 
    clear: both; 
} 
</style> 
<div class="page"> 
    <div class="pageAttributes"> 
     .pageAttributes 
    </div> 
    <div class="pageMenu"> 
     <div class="button">View</div> 
     <div class="button selected">Edit</div> 
     <div class="button">Talk</div> 
     <div class="search">Search:&nbsp;&nbsp; 
      <input type="text" id="searchItem" /> 
     </div> 
     <div style="clear:both;"></div> 
    </div> 
    <div class="pageContent"> 
     <h2>header</h2> 
     Lorem ipsum 
     <div class="pageFooter"></div> 
    </div> 
</div>