[thelist] FF and IE CSS problems with height

Craig Givens nospamaddy at gmail.com
Thu Mar 22 21:09:38 CDT 2007

Hello fellow Evolters,

I'm running into a couple of different FF and IE problems with my CSS
design and hope to get some good advice on what to do.

I attempted to hack a minimum height property for the main <div> which
holds the body content of my page, and this seems to work well in both
Firefox and IE6-7. Here are my sample pages:

Page with lots of content that expands gracefully on IE/FF:

Page with minimal content that retains its minimum height on IE/FF:

#1 The first problem is that this seems to work best only 1024
resolutions, since the footer is level where I need it to be.
Unfortunately the content area height cannot dynamically expand with %
values. I've used px as the unit, but this is limiting for resolutions
higher than 1024x768. Is there any way to adjust this properly to meet
all resolutions and work on all browsers?

#2 The second issue is that in Firefox, my right column appears to be
hiding underneath my main blue header bar, as if it were a layer
underneath. In IE it overlaps above it, which is the correct way I'd
like it to visually render. How do I get Firefox to behave properly
like IE6-7? I've tried using a z-index property to get the right
column layer to float "above" the main header, but this had no effect.

#3 The last problem is that I've used a negative -60px value on the
#rightColumn <div> to get my right column to float up and overlap on
top of the header:

#rightColumn {
	margin-right: 5px;

I don't like using negative values (aren't they bad practice?)....so
is there an alternative way to get it to float upwards to the right
while keeping the same markup order and having it visually render as
overalpping the header? And have it work on all resolutions/browsers?
I'd like to set it to position: absolute, but this had a negative

Any suggestions are very much appreciated!


More information about the thelist mailing list