firefox css problem

[ozchris]

I usually copy old templates, but thought i would code a clean page from scratch.

I'm a search engine nut, so wanted to have the content before the navigation.

So I thought the standard approach was to put it all in a wrapper, have a top header, then the main section, with the menu floated left and content floated right, and then a footer.

It looked ok in my old Crazybrowser, ok in IE, but Firefox is completely stuffing it up.

Problem 1 is that my content extends down below the wrapper. Why is this? The code is clearly inside the wrapper.

Problem 2 is the footer covers over the stuff above it.

I thought this was a pretty basic page. I'm running Firefox 2.0.0.5.

Any ideas?

The test page is at Untitled Document

[caravan]

Hi OzChris,

Your problem sounds similar to one I had a while back. When I had a wrapper which contained several floated divs then the outer collapsed. Several suggestion were put forward but the following link should take you to the one I use.

CSS Float Problem

This comes from a Position Is Everything article

Hope this helps

[sands]

Specify the height for div#main. Say 160px for your example.

[madmanlear]

According to the CSS spec, floated containers don't actually take up space, so they have to be cleared after they end. The simplest way to do this is add "clear:both" to your footer's CSS. I just tried it and it worked great.

[bj]

An approach that might save you a LOT of time in future.

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

All of the layouts on that page are source ordered and work cross browser, and it pretty much represents most any layout you could possibly want, and with the added bonus of being able to update the layout via the css without changing the html down the road!

The only thing I change is adding a main wrapper to make doing faux columns background treatment and centering easier, and I change doctype to xhtml strict.

Now, to the specifics of your problem. Don't use the height attribute, since it won't allow text resizing, and it's a fake fix. Put this in your stylesheet:

.clearA {

	overflow: hidden;

	clear:both;

	height:0;

	margin:0;

	font-size: 1px;

	line-height: 0;

        width: auto

        position: relative

}

Now, put this right before the end of the div #main:

<br class="clearA" />

And that should do it. It's a clearing problem. More info here:

Containing Floats (Complex Spiral Consulting)

And here:

Clearing elements

[bj]

According to the CSS spec, floated containers don't actually take up space, so they have to be cleared after they end. The simplest way to do this is add "clear:both" to your footer's CSS. I just tried it and it worked great.

Though your solution works in this particular case you would have a problem with it if you were doing a repeat-y background or a different background color on the #main div, since you'd find out that the div still wasn't being cleared. The background would only go partway down. The solution I suggested works in all cases.

[sands]

Originally Posted by bj

And that should do it. It's a clearing problem.

Thanks for this fix. This seems to be the only good fix for this particular problem.

[ozchris]

You guys are beautiful!

Thanks

(I chose bj's solution of a break to clear the float.)
Haven't uploaded it, but I'll use it on my new site.

A fantastic link to layout gala.
Cheers

[cardinal252]

further to the 'height:' usage on the div, firefox and IE 7 both support the use of 'min-height' which has a really similar effect to the 'height' attribute in IE 6, and allows for text resizing.

I have a tendancy to use height in IE 6 conditional commented stylesheet, and use min-height in the main stylesheets.

[bj]

You're welcome!

Yeah, I love layout gala! Saves me a LOT of work figuring things out.

[gwoodstrom]

Thanks for the link to Layout Gala bj, that will be really useful!

[alextj]

Hi guys,
Ok so I'm a little late to this discussion after my hols.
Although there's a good fix above I'd prefer to sort out the source of the problem, which is this:
div#content {float:right;
Yes the nav needs to be floated left to take it out of the 'flow', but without any float spec the content will automatically snap into the right place with no clearing probs.
Only extra that needs to be added is:
margin:0 0 0 30%(or nav width); to stop it overflowing the nav, and it's also a good idea to add e.g.
min-height:250px;
_height:250px
to the content div in case some content is shorter than the nav which will make the footer behave.
More details here (I have no connection)
2 Column CSS Layout - TheVanBlog