How to spread these divs out evenly?

I want the boxes to spread out just like this:

exactly 218 pixels across from each other.

I tried to margin both of them together but I can't get it perfect!

.box1, .box2 { margin: 0 20px }

Is there a better way to get this righ开发者_运维知识库t?

I forgot to mention, there already floated.

Why not just do a margin-right: 218px; on .box1? Am I missing something?

.box1, .box2 { float:left }
.box2 { margin-left:218px }

Float the divs left and right, make the width of the container div 218 pixels larger than needed. But then you run into problems if the left and right box are dynamically sized.

Or float them both left, and put a margin-right on the first box like the above post.