why does the border get like this, i want it around the videoclip, if i use float it do the border correctly, if i use position, then it gets like that, and i dont want to use float.
#clip{
position: relative; right: 1px; border: 2px solid #FF3399;
}
If you use float, you're pulling that element out of the normal flow of the webpage. The element with the #clip id is resized to only the necessary size to hold it. However, when it's not floated, it has to fit into the normal flow of the page. It may be inheriting the width from a parent container. You can try adding a width to the element. It's possible that might fix it.
Without seeing the HTML, we can't say for sure. But I assume it's because you're putting the border on a container of the video which is a block-level element (meaning it will automatically expand to the fullest width of it's parent element). You could set the width of that element to the width of the clip.
By default <div>s (which i assume you are applying the style on) are display: block. This means they take up full width and dynamic height. When you float it the height and width are dynamically adjusted. Add display: inline-block, or display: inline; and it will most likely work like you want it to.
Read up on the spec about visual rendering too:
My guess would be that the video gets inserted inside the #clip container. You could float the #clip to rubber-band the video, specify the width of #clip or set the border on the video element itself:
object, embed{ border: 2px solid #FF3399; }
The easiest thing you can do is to put a width to your rule.
width: 200px; // for a example where the widht is equal to your player
And if you need to put somthing on the side, float the element.