min largeur et max-width sont ignorées lorsque l'élément a display: table-cell

Question

Je suis en train de faire la mise en page simple, fluide à l'aide CSS tables technique, mais il y a un gros défaut que j'ai trouvé dans ce: min-max largeur et -width sont ignorés sur les éléments avec affichage table-cell.

Connaissez-vous une solution qui me permettrait de préciser dans quelle mesure l'élément #sidebar peut étirer dans l'exemple suivant?

XHTML:

<div id="wrapper"> 

    <div id="main"> 
    </div> 

    <div id="sidebar"> 
    </div> 

</div> 

CSS:

#wrapper { 
display: table-row; 
border-collapse: collapse; 
} 

    #main { 
    display: table-cell; 
    } 

    #sidebar { 
    display: table-cell; 
    width: 30%; 
    min-width: 100px; /* does not work! */ 
    max-width: 310px; /* does not work! */ 
    } 

Answer 1

Si vous essayez juste de faire une barre latérale et la configuration principale, l'utilisation float: left au lieu de table-row et table-cell. Ensuite, vous pouvez mettre votre min-width sur l'ID.

Answer 2

Ajouter un autre emballage intérieur de chaque div:

<div id="wrapper"> 

    <div id="main"> 
    <div class="inner"></div> 
    </div> 

    <div id="sidebar"> 
    <div class="inner"></div> 
    </div> 

</div> 

Et mettre les *-width déclarations sur les:

#sidebar div.inner { 
    min-width: 100px; 
    max-width: 300px; 
} 

Answer 3

Je cherche à responsive design pour un site qui affiche à gauche -> droite puis vers le bas et je veux atteindre une min-largeur moi-même. Faire un peu de recherche, je pense que cela pourrait répondre à cette question.

https://css-tricks.com/almanac/properties/m/max-width/