3 box divs in a row

I've been reading a lot on how to get this to work but i'm getting a bit confused. I would like 3 boxes side by side in CSS each with equal width and spanning the full width of the site. I've been able to control them if i use px but can't work out how to make it compliant with all browsers whilst using percentages so that each boxes always remains at a third of the screen width. For instance can anyone recommend how i'd alter this to get what i'm after:

#container {
margin: 2px auto;
text-align: left;
width: 770px;
height: 100px;
border: 2px dotted #777744;
background: #f4f4f0;
}
#headerleft {
float: left;
width: 248px;
height: 65px;
margin-left: 2px !important;
margin-left: 1px;
padding: 2px;
background: #f4f4f0;
border: 1px solid #777744;
}
#headercentral {
float: left;
width: 248px;
height: 65px;
margin: 0 2px;
padding: 2px;
border: 1px solid #777744;
}
#headerright {
float: left;
width: 248px;
height: 165px;
padding: 2px;
background: #f4f4f0;
border: 1px solid #777744;
}

Code (markup):

I'd appreciate any help. Thanks in advance.

 

You might have a look at one of these links:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

http://accessat.c-net.us/test/template-3col.html
http://www.saila.com/usage/layouts/

 

Thanks Greg, the second link worked almost perfectly for my site.