The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

IE 6 layout problems

This is my 1st layout in CSS, after a long history with tables. I am beginning to get a hang of it, just a few problems.

The layout is supposed to be centered. The "right-slide" box is supposed to have a height of 100% so it would reach the bottom of the page. It works in Firefox, but in IE 6 the page is aligned to the left and the "right-slide" is not 100%.

This should display relatively the same in IE and FF. The main difference is how IE and FF display the 100% since you have it inside a wrapper. FF the right-slide and leftcontent boxes go all the way to the bottom of the screen, and in IE they stop inside of your wrapper.

I'm afraid that you are using methods that just won't work. You cannot use 100&#37; heights in that way. If you specify 100% height for the element then that's all you will get (assuming the browser has something to base 100% on anyway). If the content surpasses the 100% height it will be ignored.

The only way to specify a height that will allow a column to grow greater than the height is to use min-height. Of course IE6 doesn't understand min-height so you need to supply ie6 with a hack that supplies it with height instead as ie6 and under treat height as a minimum anyway.

Unfortunately using min-height means that children will have nothing to base their height on and the height collapses to auto. This effectively means that you only get one shot at using 100% height and that is usually used for the main wrapper. You can't nest any more elements and make then stretch to this parents height (unless you are using absolute positioning but this doesn't work in IE either).

You can't also specify 100% height for an element that starts some way down the page because it will the extend 100% down from its position thus forcing a vertical scrollbar as in your example.

Please read the faq on 100% height as this is explained in detail.

In reality you can't specify columns in css that keep track with each other and you have to resort to other methods to achieve this. The 3 col sticky thread shows a number of methods to achieve this but is a complicated subject.

Perhaps the easiest way to provide full length columns is to use a background image on the main 100% wrapper (min-height:100%) to provide the illusion of full length columns as in this example shown below.