barre de défilement horizontale au-delà du point de largeur min

Question

HTML:

<div id="mcolWrapper">
    <div id="mcol">
      <div class="wrapper">
      content
      </div>
    </div>
</div>

<div id="lcol">
    <div class="wrapper">
    content
    </div>
</div>

<div id="rcol">
    <div class="wrapper">
    content
    </div>
</div>

CSS:

#mcolWrapper {
    float: left;
    width: 100%; }

#mcol { margin: 0 295px 0 235px; min-width: 500px; }

#lcol {
    float: left;
    width: 235px;
    margin-left: -100%; }

#rcol {
    float: left;
    width: 290px;
    margin-left: -295px;

Je veux définir une largeur minimum sur la colonne centrale ne peut donc pas réduire trop et au-delà de ce point de largeur minimum, je voudrais que le navigateur pour afficher une barre de défilement horizontale au lieu de la colonne de droite chevauchant la colonne centrale.

Answer 1

Vous pouvez essayer le plugin jQuery diviseur. Il est ce que je l'utilise quand je besoin d'une mise en page de colonne, car il fait un meilleur travail de abstraire de différences de navigateur que des modèles CSS faire, et il gère parfaitement les barres de défilement.

http://methvin.com/splitter/

Answer 2

min-width est pas une propriété css entièrement pris en charge. Un moyen facile autour dans votre situation serait d'ajouter simplement un div au bas de la colonne qui a une largeur égale à la valeur de votre largeur minimale.

<div id="mcol">
  ...
  <div style="width:500px;"></div>
</div>

Cela entraînera la colonne de ne pas être en mesure de réduire toute petite. Hope qui aide!