Need two div's to line up correctly

Question

Here is a screenshot of how both div's lineup: http://tinyurl.com/d3kopn

The left column is , the div that I want to line up to the right of it is

And both those div's are within

.content-body {
    padding:10px 15px;
    font-size:.8em;
    font-family:arial;
    overflow:auto;
}

.col-left {
    float:left;
    position:relative;
    overflow:auto;
    height:100%;
    width:20%;
    padding:0 5px 0 0;
}

.col-middle {
    width:auto;
    height:auto;
    float:left;
    xmargin-top:5px;
    xfont-size:.8em;
    border:1px solid red;
    font-family:arial;
}

How would I get the .col-middle div to line up properly?

Any help is appreciated.

Answer 1

Change the width of .col-middle to 80% or less so both divs can fit inside their container.

You could also make .col-middle float right.

Answer 2

adding a

clear:none;

to both you column divs

and a

width:80%;

to your middle column should enable them to go side by side :)

Answer 3

Another option (although you really should give the right column a width as well):

    .col-middle {
        ...
        margin-left: 20%;
    }

Edit: If you give .col-middle a left margin, there´s no need to float it or to give it a width