Member Avatar for 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)

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;
}
  • 2 Contributors
  • 2 Replies
  • 112 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by shirishdhotre

Dani AI

Generated

Nice catch by — this is the classic float/containment symptom rather than a mysterious browser bug. Floated boxes are taken out of normal flow, so their parent can collapse and that can produce visual “gaps” or repaint artifacts around background images. Inserting a clearing element works, but there are cleaner, more robust approaches that avoid extra markup and are easier to maintain.

A few practical alternatives (pick one that fits the layout):

  • clearfix (works in older and modern browsers)

    .clearfix::after {
content: "";
display: table;
clear: both;
}

    Add the class to the parent that should contain the floats.

  • create a new block formatting context (no markup changes)

    .parent { overflow: auto; }   /* or overflow: hidden; */

    Be careful: overflow:hidden will clip visible overflow (shadows, tooltips).

  • modern option (no side effects, semantic)

    .parent { display: flow-root; }

Quick debugging tips: temporarily give the parent a semi-opaque background or outline to confirm whether it’s collapsing; inspect computed height in dev tools; check whether images above are loading late and causing reflows (set explicit image dimensions to reduce that). Also verify a standards DOCTYPE so browsers use consistent layout rules.

A short note for : avoid <br clear="all"> — it is presentational and deprecated. Reordering floats in the DOM can sometimes change wrapping, but you usually don’t need to move source order—containing the floats is the simpler, correct fix.

Member Avatar for lisan28

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

Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.