This might do the trick..

and the css:

You can adjust the width of the boxes in the css above. The clear:left is important to let the rest of the text flow further below as it should.

okay here http://www.countyfairgrounds.net/boxtest1.html and css file is boxtest.css These are simple test files so I am hoping you will understand what is wrong.
Notice. I have lost my right div light blue right side... and in IE something strange is happened... when the page scrolls right in the center is this white thing which goes off the page to the right for a long way. Like wow weird. While it is nice to maybe put two boxes next to each other in a division... I need space between them somehow also.

Look at the width of your center!

You can add a margin to the boxes to have some space between them.
Add the following style to box_left.

It looks better. Can I give the box on the right a different classe id, so that I can give it a different left margin? Liek say box on left would be margin-lef"10px; and the one on the side of it to the right then would be maybe margin-keft:50px; I "think" that would put the box on the right side 50px to right of the box on the left?
Little confused.

http://www.countyfairgrounds.net/promoters.html

Okay I want to place a box and a video in to the left of the navy box4 id on this page and put a video in it.
I put the same code in as you gave above and it appears to work on http://www.countyfairgrounds.net/boxtes1.html and I put the clear line below the navy box... needless to say it did not work. Why? Can you help me please?

I can't seem to find box4, are you sure it is positioned on the page? Other than that, the way you think about the margins in your post above is pefectly fine. Please keep in mind that a class is a class and an id is an id, there's no such thing as a class-id, that's only making things dificult to follow for others

Its the navy blue box with the white dashed border around it and has a link for entertainers showcase and entertainers podcasts - where I want to put another box is to the left of it. right below and a little right of the chicken.
1) do I use the same box id?
2) if so there should be a margin in it right?
3) I understand the clear thing needs to be below them but that seems to wipe out everything that comes after in the page.
?????

1) No, never use the same ID twice, it's an Unique Identifier
2) I would go for a margin-right yes
3) the clear is used to make sure elements below it don't go next to it. You own How To Master CSS right? Floats are explained there, in conjunction with clears. The video is called: Floating And Clearing

You now used a margin-left of 350 px on box4, but you can remove that and put a div there with a width of 330px and a margin right of 20px; float both boxes (box4 and your new one) to the left et voila, you've got two boxes next to eachother