Stuck on a 3column css problem.

[Deleted User 234324]

Ok working on a new site currently, ive not done many 3 column sites before specially not one with 2 fixed columns and a central liquid one, ive used floats to position the left and right columns. The problem Im getting is because the content that gets put into these columns is dynamic with the left column being the tallest currently (will be main as site grows) im finding that the left column expands past the rest of the content on the site, it doesnt extend the height of the whole site.

Any idea's or possible solutions to this ? Pic of what it looks like.


CSS Code for 3 columns

.container {
    width: 100%;
}

.leftcolumn {
    float: left;
    width: 165px;
    margin-left: -100%;
    min-height: 300px;
    padding: 4px 2px 4px 2px;
}

.rightcolumn {
    float: left;
    width: 165px;
    margin-left: -169px;
    padding: 10px 2px 0 2px;
    min-height: 300px;
}

.maincolumn {
    margin: 0 165px;
    min-height: 350px;
    padding: 4px 4px 0 4px;
}

Without posting the html its essentially, 3 divs wrapped in a container div.

 

[Deleted User 234324]

Appreciated the feedback SiriusB and Sic you both helped tremendously. Sirius for that great link, turns out one of the templates they have listed is identical to the one ive made apart from one thing.

What Sic mentioned. the clear: xxxx; part. Clear: left; solved my problem.