Floated elements disrupting background image of body?

[lisan28]

Hello everyone,

I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag:

(Right now the page is only working properly in non-IE browsers aside from the bg issue, but I don't know any developers that regularly use IE anyways...LOL)

http://www.spidersend.com/new_site/newsite4/test6.html

However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before?

I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd.

Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS:

body
{
	background-color: #FFFFFF;
	padding: 0px;
	margin: 0px;
	font-family: "arial";
	background-image: url('images/bottom_slice.png');
	background-repeat: repeat-x;
	background-position: bottom center;
}

div#header
{
	background-image: url('images/header_slice3.png');
	background-repeat: repeat-x;
	height: 198px;
	width: 100%;
}

div#header-content
{
	width: 680px;
	margin: 0px auto;
}

div#top-navigation
{
	width: 680px;
	margin: 0px auto;
	position: relative;
	bottom: 16px;
	color: #FFFFFF;
	font-family: "arial";
	font-size: 16px;
	padding: 0px;
}

div#content
{
	width: 850px;
	float: left;
}

div#content-header
{
	background-image: url('images/content_bg_top.png');
	width: 850px;
	height: 30px;
}

div#content-footer
{
	background-image: url('images/content_bg_bottom.png');
	width:850px;
	height: 32px;
}

div#content-area
{
	background-image: url('images/content_bg_slice.png');
	padding-left: 18px;
	padding-right: 18px;
}

div#adbar
{
width: 157px;
float: right;
}

div#adbar-header
{
	background-image: url('images/sidebar_top.png');
	width: 157px;
	height: 30px;
}

div#adbar-footer
{
	background-image: url('images/sidebar_bottom.png');
	width: 157px;
	height: 26px;
}

div#adbar-area
{
	background-image: url('images/sidebar_slice.png');
	padding-left: 5px;
	padding-right: 5px;
}

div#sidebar
{
	float: right;
	clear: both;
	position: relative;
	right: 10px;
	background-color: #d2e7f0;
	width: 300px;
	-moz-border-radius: 5px;
	padding: 5px;
	margin-left: 15px;
	color: #0c577a;
}

div#sidebar2
{
	float: right;
	clear: both;
	position: relative;
	right: 10px;
	background-color: #d2e7f0;
	width: 300px;
	-moz-border-radius: 5px;
	padding: 5px;
	margin-left: 15px;
	margin-top: 20px;
	color: #0c577a;
}

div#content-wrapper
{
	width: 1007px;
	margin: 0px auto;
}

[lisan28]

Solved it! I added an empty div with clear:both underneath the two floated elements and that fixed it.

[shirishdhotre]

Cool Dear... but always try and use <br clear="all" /> instead of mentioning empty div with Clear:both....

Dear also Not all RIGHT Float element are needs to be mention first before Left Float elements.... (eg: <div id="adbar">...</div> to be mention before <div id="content-area"> ... </div>

Regards,
Shirish Dhotre