本部のこぼれ左の列に、それはスクリーンショットでは空白領域

Question

に合わせてストレッチしたくない、あなたはホワイトスペースがある場合、それは（幅：100％）を合わせてストレッチします表示されますhttp://i29.tinypic.com/24v0gma.png

ここ

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

左コルCSSクラス：

淡黄色と暗い黄色のCSSクラスここでは、記事と呼ば

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

ここでライブページを見ることができます：http://herkimer.edu/admissions/view_news/

黄色いボックスが左にこぼれることはありません。

Answer 1

あなたは実行します。

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

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

Answer 2

は、クリアを追加することができます。 .col-leftに？

--edited 右のすべてのdivを.col-rightという名前の新しいdivにパックし、右に浮動させることもできますし、widthプロパティを与えることもできます。次に、クリア：を追加します。 .col-leftスタイルに変換します。それは、右の列が左の列の下で続かないという効果があります。私はFirebugでテストし、うまくいきました。

Answer 3

おそらく、あなたは「COL-右」のクラスと新しいdivの右列の要素をラップすることができます。彼らは横方向に拡張しようとしたが、彼らも高さと垂直方向に展開されませんので、

.col-right 
{  
    float:left;  
} 

Answer 4

のdivは、デフォルトではブロックレベル要素です：定義された100％私はあなたのコードと、次のCSSでこれをテストしました。

div.col左は、それが含ま コンテンツとしてだけとして背が高いです。

1つのdivにすべての記事のdivを入れ子にすることをお勧めします。それはあなたが望むようにそれらを制限します。

変更を行います。

<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> 

：

<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>