why is my image float breaking the container?

hi all, can anyone please help me out...

here is the website

the problem is that the flags [top area in the header] are breaking the main container and proturding besides setting a definite width for the container..

the css is valid and so is the html ....
here's the css code.. any help would be appreciated:

 

most likely it's because of your padding on the header..
try this..

#headcont img
{
margin-left: -20px;
float: right;
}

Code (markup):

 

thanks but even with the code you have given im still facing the same issue

 

Remove the padding on #headcont and add margins to the elements inside, and you won't have this problem.

jBud's example would produce double margins in MSIE6 unless he added display:inline.

 

i tried removing the padding yet the image flows out... i tried out all position yet it wont fix

btw i found out that removing the doctype declaration solves the problem for ie but still shows up in FFox

edit: trying soulscratch's method

 

yeah.. almost forgot that soulscratch...

 

Change the CSS to that..

 

yay!! thanks soulscratch!

the following worked:

i would like to ask why was the padding interfereing?
??

especially since i had put a float on the image... [which should float it right to the container which suprisingly didnt contain it properly!]?