Read With Formatting

CSS issue when when using div with min-height with IE and height with mozilla/netscape/etc.

The problem can be seen on a few pages of grindinggears. The problem is the left column and the right column are set to at absolute locations and the middle column is just there. What this means is that the footer is based off the middle column.

Because of this if there is not enough data in the middle column to go below the google text ads then the footer looks really messed up. You cannot see this on the current site because I set the div of the middle column to have a height of 1000px.

This works for most pages but makes it so all page shave a scroll bar (well I think they would on most peoples browsers anyway because of the right hand column). The problem really comes in when Mozilla/Netscape does not let the middle column get larger than the 1000px. IE does not have an issue it will let the column grow as much as it needs but Mozllia wont.

Mozilla works fine if I set min-height instead of height but the problem there is that IE does not support min-height in div's. Can anyone think of a work around for this or has anyone figure out a way to make this work? I would rather stay away from tables. As anyone can see from looking at my source I only use tables on like 1 or 2 pages.

Can you post a simplified example of the layout? Just the divs with comments where the content is.

<div id="head-runner">
header
</div>

<div id="leftnav">
left nav
</div>

<div id="content">
contents
</div>

<div id="rightnav">
right nav
</div>

<div id="bgFooter">
<div id="mainFooter"></div>
</div>


the css file is http://www.grindinggears.com/test_style.css

It is rather large but in short the left is set to the left... the right is set to the right the content is set to be 1000px in height and the footer is just set to show up. Maybe I have to mess around with floating. I am reading a bunch on it but nothing seems to work yet.

http://realworldstyle.com/nn4_3col_header.html

I have actually gone there and learned a bit. He has the exact same problem I have if the longest column is the right hand column though.

If the longest column is the left column or the middle column there is no problem. The problem is only if the right column is longer and it just happens to be in my case because I do not have a lot of content and I have the 120x600 google ad.

Okay well how kewl. I actually ended up fixing it myself. What I did was set the left hand column to a height of 700px. The downside is that the middle is not all white on IE but is in Mozilla/Netscape and any other browser that supports min-height in a div. At least this fixes the problem for now.

You are close to the solution in that you are using a float: left in leftnav. Place a float: left in content and rightnav and drop the position: absolute in rightnav (position: absolute is totally evil if you want to have a page flow correctly). Drop all of your height attributes. You may need to nest these three divs in an outer div to get the middle div to expand correctly. You already have a clear: both in bgFooter which is needed.

I've attached the css with the modifications if you want to try it.

I tried the style sheet you sent me and what it did was some what correct in that everything was where it was supposed to be and the footer was below it all but they were each below each other as well.

So there was a left nav, then below it but to the right (correct spot to the right) was the content, then there was the right nav which was below the content (in the spot where the left nav is but I am sure that is easy enough to fix).

I want to remove all the height specific code so I will try to modify the css you sent me to get it working perfectly. Thanks for the help!

I tried the style sheet you sent me and what it did was some what correct in that everything was where it was supposed to be and the footer was below it all but they were each below each other as well.

So there was a left nav, then below it but to the right (correct spot to the right) was the content, then there was the right nav which was below the content (in the spot where the left nav is but I am sure that is easy enough to fix).

I want to remove all the height specific code so I will try to modify the css you sent me to get it working perfectly. Thanks for the help!Do you have an example I can look at? i.e. a page using that style sheet.

http://www.grindinggears.com/test/gg.html is a page that uses the style you sent me. With IE the middle content is actually at the right vertical level but with Mozilla it is not.

Note: Some of the images are missing but that should not be such an issue.

http://www.grindinggears.com/test/gg.html is a page that uses the style you sent me. With IE the middle content is actually at the right vertical level but with Mozilla it is not.

Note: Some of the images are missing but that should not be such an issue.
OK, the issue is that we aren't specifying a width for the center column (and a couple other minor issues) which you don't want to do. I've modified the CSS and you need to add a div around leftnav, content and rightnav with an id of "container".

You might need to modify some of the CSS properties of some of the inner divs in content, but you get the idea.

OK, the issue is that we aren't specifying a width for the center column (and a couple other minor issues) which you don't want to do. I've modified the CSS and you need to add a div around leftnav, content and rightnav with an id of "container".

You might need to modify some of the CSS properties of some of the inner divs in content, but you get the idea.
Okay I have that setup at http://www.grindinggears.com/test/gg.html but the footer is incorrect. I actually found http://www.fu2k.org/alex/css/layouts/3Col_NN4_AR.mhtml which even works in NN4 all all modern browsers so I think I am going to end up borrowing their stuff to make it work correctly on gg. For now though it looks as though things work in most browsers so in the next couple weeks I will do the fixes.

hmmm, the footer worked fine for me. Sure you didn't change anything in the CSS file?

All I did was download it and unzip it. I will give it another shot. Maybe it has to do with the div inside the mainfooter div. Hmm it did seem like it should have worked though. I will keep looking into it. It would be nice not to have to set a specific hight for anything and have the white middle content area go all the way to the footer on all browsers.

I will keep you posted.

... is really useful for me, I am glad to read it here.