padding when a floated object element is inside

Question

i have the below html: <div class="wrapper"> <div id="header"> <img alt="Giannis Simeonidis" src="logo2.png" width="300" height="220"/> <object width="550" height="200" id="banner"> <param name="movie" value="banner.swf" /> <embed src="banner.swf" width="550" height="200"
wmode="transparent" type="application/x-shockwave-flash"> </embed> </object> <div id="menu"> <object width="600" height="20"> <param name="movie" value="menu.swf" /> <embed src="menu.swf" width="600" height="20"
wmode="transparent" type="application/x-shockwave-flash"> </embed> </object> </div> </div><!--End of header--> </div>

and the css is:

wrapper{

/*background: url(header_bg.jpg) repeat-x;*/ background: url(container_bg2.png) repeat-y; margin: 0 auto; margin-top: 20px; width: 900px; }

header{

width: 900px; padding: 0 10px; }

banner{

float: right; }

menu{

clear: right; padding-left: 13px; }

For some reason the right padding applied to the #header is not working; Any ideas?

Answer 1

The width of the wrapper is 900px. The width of the header is 900px + 10px Left Padding + 10px Right Padding = 920px.

You are trying to fit a 920px div inside a 900px div. Either make the wrapper wider to 920px or the header shorter to 880px.