Problème de disposition du fluide dans Chrome

Question

J'ai deux colonnes. Un avec une taille fixe (220px) et l'autre qui remplit l'espace restant.

<div id="left-panel"> 

</div> 

<div id="main-panel"> 
    Content 
</div> 

CSS:

#left-panel { 
    float: left; 
    width: 220px; 
    height:auto !important; 
    height:750px; 
    min-height: 750px; 
    border-right: 2px solid #d1d1d1; 
    padding: 0px 0px 0px 30px; 
} 

#main-panel { 
    margin: 20px 20px 0px 280px; 
    overflow: hidden; 
} 

Le problème est que dans Google Chrome le panneau principal ne se développe pas pour remplir toute la région. Il crée une marge droite avec la largeur de #left-panel.

Je ne peux pas faire flotter le panneau principal ou le contenu n'a pas pu être étendu à la largeur de #main-panel dans les autres navigateurs. Y at-il un autre moyen de laisser un élément flottant remplir l'espace restant?

est ici un tirage au sort qui illustre le problème:

http://img704.imageshack.us/img704/700/esquema1a.jpg http://img704.imageshack.us/img704/700/esquema1a.jpg

Merci pour votre aide.

Answer 1

Le problème avec votre code est le overflow: hidden que vous avez ajouté à la colonne de largeur variable. Retirez-le et cela fonctionnera bien.

En outre, vous devriez essayer de nettoyer un peu votre code - il y a beaucoup de propriétés inutiles. Une implémentation de base de cette technique serait quelque chose comme ceci: http://jsfiddle.net/8LF9F/1/

#fixed { 
    width: 220px; 
    float: left; 
} 

#variable { 
    /* Width of #fixed + any margin you want */ 
    margin-left: 240px; 
} 

div { 
    border: 1px solid #333; 
} 

Answer 2

Je pense que c'est à cause de votre marge gauche dans le # panneau principal.

Essayez quelque chose comme

#main-panel 
{ 
    margin: 20px 20px 0px 0px; 
    overflow:hidden; 
}

Peut-être que vous devriez envelopper votre gauche pannel et main-pannel pour éviter d'utiliser une valeur de marge principale pannel.