Issue with CSS Positioning

[followthehollow]

Ah, the age old problem.

Seriously though, I'm designing a website for my high school and for a while things were going great. I had the template ready made in Photoshop, I was coding nonstop for a few hours giving Dreamweaver a hell of a workout.

Anyways, my issue is a very common one. I need to somehow manage to make this page position itself correctly in Firefox 1.0+ and at minimum, IE 6.0+.

I have a simple layout where there is a header, underneath of which there is a navigation menu to the left (fully CSS) and a main content div to the right of the navigation. By positioning everything absolute within a container, I can manage those parts. The problem starts when I try to put in a footer. Using absolute positioning, assuming the content ever got long enough, it would plow right over the footer without hesitation.

I want the content div to expand infinitely and push the footer div down with it, so that the page always maintains its structure. I realize that absolute positioning is just about the antithesis of this. I've tried it with relative positioning too, which leads to another problem. I can get the page to work, but only when giving the container div (which holds the whole page) an overflow: auto attribute, but I don't want the extra scrollbar.

Does anyone know how I could do this? It seems simple enough. The only thing that needs to be movable is the footer div, but it has to be positioned the same in both modern and antique browsers. I'd appreciate any help or light someone could shed on the thing.

Thanks

[boycottIE]

I'm just an amateur, but it seems to me that it would help if you could post the code and CSS as you have it now.

I think my site might be somewhat similar to what you want, and you're welcome to look at it. Again, I am an amateur, so you might get much better advice from others.

http://www.indiana.edu/~meis/

The CSS is compressed. For ease of viewing, you can see the uncompressed CSS at:

http://www.indiana.edu/~meis/css/styles_uncompressed.css
http://www.indiana.edu/~meis/css/screen.css

Also, I am not sure why you feel like you need to support FF 1.0. Are others supporting it? Should I be worried about it? It seems like the vast majority of people who use FF update their browser automatically, unlike IE 6/7.

[followthehollow]

Actually I fixed the problem a few hours after posting this.

It seems that there is a trade-off. By some weird bug, IE deciphers margin dimensions differently from Firefox, even when they use the same unit (pixels in this case).

The solution was to position only static pieces of the page relatively, make making sure the container was both not floated and not positioned. This ensured that I didn't need an overflow. By changing all of my margin settings to padding instead, Firefox and IE both seem to see the same thing. Problem is, I looked it up and it appears that when messing around with padding, you run into issues with Safari and lesser known browsers.

I guess that's the price you pay for obeying standards.

Thanks for your reply though boycottIE, I agree with your name and hopefully the next poor guy that comes along will learn from my mistake.

[followthehollow]

Sorry for the double post, my other one is long and is in moderator queue.

As far as supporting FF 1.0, I only try to for my own peace of mind. Building a site that is truly compatible with a wide range of browsers is the true skill behind this art. Though you're probably right, realistically no one really uses FF 1.0 anymore, nor anything below IE 6.0 as it comes standard with Windows XP.

But IE 6+ is definitely a must because some people just can't accept the change that is Firefox.