[SOLVED]three column layout help

Here is my page: http://www.reginaspictures.com/notables.htm
I would like the text and blanks in the red, green, and blue sections to be pushed over to the left some. But I would like to keep it aligned nicely, so the text blanks are still above each other.

Here is my HTML:

2008 Summer Placement

var f = document.createElement('input');
var l = document.createElement('input');
var whatName = document.createTextNode("What is your fiancée's name?");
var onStaff = document.createTextNode("Are they on staff now?");
var first = document.createTextNode("first:");
var last = document.createTextNode("last:");
var br=document.createElement('br');
var d = document.createElement('/div');
var d2 = document.createElement('div id = "triCol"');
function create(dropdown)
{
var index = dropdown.selectedIndex;
f.type = 'text';
l.type = 'text';
f.style.textalign = "let";
l.style.textalign = "left";
if(index == 1) {
document.myForm.appendChild(whatName);
document.myForm.appendChild(br);
document.myForm.appendChild(first);
document.myForm.appendChild(f);
document.myForm.appendChild(last);
document.myForm.appendChild(l);
//document.myForm.appendChild(d);
//document.myForm.appendChild(d2);
document.myForm.appendChild(onStaff);
//document.myForm.appendChild(d);
}
else {
document.myForm.removeChild(whatName);
document.myForm.removeChild(br);
document.myForm.removeChild(first);
document.myForm.removeChild(f);
document.myForm.removeChild(last);
document.myForm.removeChild(l); }
}

And my CSS:

#leftCol {
float:left; width:50%; padding-left:5px; padding-top:5px; pading-bottom:5px;
}

#rightCol {
float:right; width:49%; padding-top:5px; padding-bottom:5px;
}

#secondCol {
float:left; text-align:right; width:34%; margin-left:-67%; padding-top:5px; padding-bottom:5px; background-color: blue;
}
#firstCol {
float:left; text-align:right; width:33%; margin-left:34%; padding-top:5px; padding-bottom:5px; background-color: red;
}
#thirdCol {
float:left; text-align:right; width:33%; padding-top:5px; padding-bottom:5px; background-color: green;
}

.c3 {
background-color: lightgray;
}

.c4 {
clear:both; border-bottom:medium solid #0066CC;
}
.c5 {
float:left; width:32%; padding-left:5px; padding-top:5px; padding-bottom:5px;
}
.heading {
color:#0033CC; font-family:Comic Sans MS; font-style: italics; padding-left:5px;
}
#bottomBorder {
border-bottom: thin dotted #000000;
}
h1 {
color:#CC0033; text-align:center; font-family:Comic Sans MS;
}
.note {
font-style:italics; float:right; padding-right:5px;
}
hr {
noshade color:#0033CC; border:0px; height:1px;
}