Div's spilling into left column, do not want it to stretch to fit the blank area

Question

In the screen shot, you will see where there is a white space, it will stretch to fit (width: 100%) http://i29.tinypic.com/24v0gma.png

The light yellow and darker yellow css class here, called article:

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

The left col css class here:

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

You can view the live page here: http://herkimer.edu/admissions/view_news/

How do I get it so the yellow boxes do not spill over into the left?

Answer 1

may be add clear: right; to .col-left?

--edited You can pack all divs on the right in a new div called .col-right and make it floats right aswell as giving it a width property. Then add clear:right; to your .col-left style. That would have the effect that the right column won't continue under the left one. I tested it with Firebug and it worked.

Answer 2

You do:

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

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

Answer 3

Perhaps you could wrap the elements in the right column in a new div with a class of "col-right". I tested this with your code and the following CSS:

.col-right 
{    
   float:left;    
}