Firefox Centered Layout Problem

I have a problem with Firefox.

The container div does not seem to be stretching over all the content within it.

This is causing divs under a certain point to become transparent instead of having a white background.

I've hosted my files on a mates server:

http://www.ooee.biz/

Works fine in IE btw.

MC

 

Fixed it. I changed this...

#footer {
	text-align: center;
	width: 100%;
	clear: both;
	float: left;
	}

Code (markup):

To this...

#footer {
	text-align: center;
	width: 100%;
	clear: both;
	}

Code (markup):

So I guess you can't have clear and float in one div.

MC

 

Yes, you can. You don't yet understand how floats work. The float is not in the flow, and doesn't exist as far as block elements are concerned. Clearing the other floats put the footer below them, but as a float itself, it doesn't exist for the parent container. When you made the footer non-float, the clear property put it below the other floats, but the footer is now an in-flow element that its parent knows about, and encloses.

cheers,

gary

 

I understand what you are saying.

The float literally floats above all the in-flow elements. So when I tried to extend the original container it didn't work because the footer was floating above this.

Thanks

MC

 

That's not exactly what happens, but it's close enough for visualization.

Study the visual formatting model, subsections 9.4 and 9.5 for the real down and dirty stuff. You must really understand this to use css comfortably. It's not rocket science, but it will require study. For a practical view, Google "listutorial". Study their examples. The more you know about visual formatting, the more fun this css is.

cheers,

gary

 

I will read this.

Thanks for your advice.

MC