Le Div déborde sur la colonne de gauche, je ne veux pas qu'il s'étire pour s'adapter à la zone vide.

Question

Dans la capture d'écran, vous verrez que lorsqu'il y a un espace blanc, le texte s'étire pour s'adapter (largeur : 100%). http://i29.tinypic.com/24v0gma.png

La classe css jaune clair et jaune foncé ici, appelée article :

.article {
    padding:10px;
    overflow:auto;
}

La classe css du col gauche ici :

.col-left {
    float:left;
    position:relative;
    overflow:auto;
    height:100%;
    width:20%;
    xpadding:0 5px 0 0;
    xfont-size:.8em;
    font-family:arial;
}

Vous pouvez consulter la page en direct ici : http://herkimer.edu/admissions/view_news/

Comment faire pour que les cases jaunes ne débordent pas sur la gauche ?

Answer 1

Peut être ajouter clear : right ; à .col-left ?

-- modifié Vous pouvez regrouper tous les divs sur la droite dans un nouveau div appelé .col-right et le faire flotter à droite ainsi que lui donner une propriété de largeur. Ensuite, ajoutez clear:right ; à votre style .col-left. Cela aura pour effet que la colonne de droite ne continuera pas sous celle de gauche. Je l'ai testé avec Firebug et cela a fonctionné.

Answer 2

Vous le faites :

.article {
  margin-left: 100px; /* example */
}

.col-left {
  width: 100px; /* same as margin-left above, might not work with percentage */
}

Answer 3

Les divs sont des éléments de niveau bloc par défaut. Ils essaient donc de s'étendre horizontalement mais ne s'étendent pas verticalement, même si une hauteur de 100% est définie.

Le div.col-left est aussi grand que le contenu qu'il contient.

Je vous suggère d'imbriquer toutes les divs d'articles dans une div. Cela les contraindra comme vous le souhaitez.

Changez :

<div class="content-body">
  <div class="col-left">
  </div>
  <h1>Admissions Announcements</h1>
  <p style="padding:5px 0;">Page 1 of 1 pages </p>
  <div class="article odd">
  </div>
  <div class="article even">
  </div>
  <div class="article odd">
  </div>
</div>

A :

<div class="content-body">
  <div class="col-left">
  </div>
  <h1>Admissions Announcements</h1>
  <p style="padding:5px 0;">Page 1 of 1 pages </p>
  <div>
      <div class="article odd">
      </div>
      <div class="article even">
      </div>
      <div class="article odd">
      </div>
  </div>
</div>

Answer 4

Vous pourriez peut-être envelopper les éléments de la colonne de droite dans un nouveau div avec une classe de "col-right". J'ai testé cela avec votre code et le CSS suivant :

.col-right 
{    
   float:left;    
}