First CSS design: background disappears with float

[fillup07]

So, I'm doing my first CSS design... and have run into this problem.

I'm using IE 6 and Mozilla Firefox to test it.... and my page looks fine in IE but not in Firefox.

Basically, when I add a "float:left;" or "float:right;" to the div#content the background image of div#pagecontent disappears. (the background image is the tan left side and white right side - so you'll just notice the tan is gone)

Here's with the float:

Edit:

url deleted

(both ways look right in IE 6 for me... but not Firefox and possibly others)

Problem areas:

div#pagebody
	{
	clear:both;
	background: url('images/contentbg.gif') repeat-y 50% 0;
	padding-left:10px;
	width: 733px; 
	}
div#leftside
	{
	width:165px;
	float:left;
	padding:3px;
	}
div#content
	{
	float: right; /* causing background image to dissapear in mozilla */
	width:500px;  /* this actually needs to be bigger but just testing now */
	color: black;
	font: 10pt tahoma;
	}

[Guimauve]

Try this:

#content
  {
  margin-left: 211px;
  width:500px;
  color: black;
  font: 10pt tahoma;
  }

Also, there is no need to put div in front of all of your style definitions. # is the way to say that the style is for a specific id, and an id has to be unique on a page. So what you are doing is really overkill.

Charles

[Egor]

Have you tried putting a <br style="clear: both;" /> inline between the footer and the floating columns? I know you have it in your footer, but maybe that's not helping.

[Paul O'B]

Hi Phil,

Egor is correct except that there is a neater way of doing this.

.clearer{
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}

Then add this code exactly here (must be exactly here):

	 bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb 
	 bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb 
	</div>
<div class="clearer"></div>
</div>
<div id="footer"> <span id="footerleft">Copyright 2004 Phil Freo</span> <span id="footerright">Website

That will enable mozilla to extend its background around the float because floats are removed from the flow and should flow out of the parent according to the specs. Clearing the float before the parents closing div allows the parent to extend and encompass the float with some real content.

Charles's solution above is partially correct in that the background appears because you have some content that is not floated and therefore the parent is stretched with the content. However if the left column were longer then the left float would spill out of the container and the background would not extend.

Therefore if you use charles's version then you still need the clear fix above anyway.

Hope that helps.

Paul

[Egor]

Paul,

I have seen a few people using div's to clear floats instead of br's. Is there a difference, and has one the advantage over the other?

[Paul O'B]

I have seen a few people using div's to clear floats instead of br's. Is there a difference, and has one the advantage over the other?

Well in most cases its mozilla that needs its floats cleared where backgrounds are concerned and then <div style="clear:both"></div> doesn't work for mozilla. It needs something to get hold of and works if you use the break method <br style="clear:both" />.

However IE doesn't like the break method so you would in fact have to use both in some cases.

In both cases you will also get extra space that you don't want. Therefore I use the div method with a 1px height tha gives mozilla and ie something to get hold of and then we clear up the space by using a negative margin.

.clearer{height:1px;overflow:hidden;clear:both;margin-top:-1px;}

I find that the above method works well for both browsers in all the cases I've tested without adding extra space thats not required. (I prefer it even to the after: fix which needs no html but doesn't take into account ie.)

Paul

[Egor]

Thanks, I appreciate the explanation. Looks like your solution is best.

[fillup07]

You guys are awesome, thanks a lot.

You can check out the current progress at

Edit:

url deleted

... still gotta figure out the nav menu...

[esopo]

Hi,

I know the problem described above was solved in this case, but I'm afraid that it didn't solved mine. Even with the "clearer" hack it didn't work. So I kept searching the net until I found what it seems to be quite a definitive solution.

I'ts about setting "height: 1%" at the conflictive element.

You can find all the needed information about this "Holy Hack" here

It has worked perfectly in my case. So I guess it can help others.

Hope this helps some of you.

Regards

[Paul O'B]

Hi,

Thanks for the hack and if you look through some other threads you'll see that we use it a lot already Still its good to remind people about it.

IE has a lot of trouble determning the width of elements when they are specified by margins alone . In a lot of cases the problems can be solved by giving the offending element a height:1% although you need to hide it from other browers of course.

There are variety of cases that crop up in ie and using height:1%, position relative, display:inline or display:inline-block can cure the problem. Sometimes a combination of techniques are used

However for the above examples the clearing of floats should not be dependent on any hacks as floats should have widths and need to be cleared because that is how it works. The clearer technique above works consistently well but again there are always exceptions. There are other techniques for browsers like mozilla using the pseudo class after which is quite a tidy way to do it.

As usual with CSS nothing is as straight forward as it seems

Paul