need help with css layout -- works in FF, not in IE

I have a layout that works how I want in FF, but not in IE, any
version:
http://nerdcraft.net/css.html

On the left hand side, I have two 'columns' which are to contain tree
navigator widgets. In firefox, they display one atop the other, like a
single column, which is how I want. In IE, the second one displays
next to the first, on top of my data display area on the right hand
side.

I've mucked around a lot with this, and I cannot get it to display
properly in IE. Can someone lend a hand? This is beyond my abilities
in css.

Thanks!

Actually, nevermind; it looks like it works okay in my simplified
version. Apparently I'm doing something wrong when I start adding
content.

In article
<cf1c2122-a1f9-4d0f-88d8-3d51ccbb0bd1 (AT) v19g2000yqn (DOT) googlegroups.com>,
lawpoop <lawpoop (AT) gmail (DOT) com> wrote:

I have a layout that works how I want in FF, but not in IE, any
version:
http://nerdcraft.net/css.html

On the left hand side, I have two 'columns' which are to contain tree
navigator widgets. In firefox, they display one atop the other, like a
single column, which is how I want. In IE, the second one displays
next to the first, on top of my data display area on the right hand
side.

I've mucked around a lot with this, and I cannot get it to display
properly in IE. Can someone lend a hand? This is beyond my abilities
in css.

Your description of the problem is a bit mysterious. Anyway, are you
aware of some trouble mentioned at:

<http://validator.w3.org/>

Very sharp pics, nice. Digital camera?

--
dorayme

lawpoop wrote:

I have a layout that works how I want in FF, but not in IE, any
version:
http://nerdcraft.net/css.html

On the left hand side, I have two 'columns' which are to contain tree
navigator widgets.

Actually, I would approach this by using two divs. The two Navs in the
first div and have it floated left. The Data div I would simply allow to
flow to the right of the float (I would apply a margin-left value to the
Data div). Since your way works for what you present, it's only a matter
of preference and so my comments on your demo.

What I see are two columns with two stacked Nav divs on the left and a
Data div on the right. The 1st Nav is floated left - the Data display is
floated right - the 2nd Nav is also floated left - all three have fixed
height and widths as does the wrapper and all else.

It's ok if the contents were to be no greater than their heights. In
order to accommodate content greater than the desired height, then the
three's height should be declared as min-height which would allow the
divs to stretch height-wise if content is greater than the min-height
and prevent vertical scrollbars from appearing.

Then there is the problem of the background not filling for the two
columns if either of the heights increases beyond the min-height. No
problem if the background is also applied to the wrapper.

Then there is the problem of user window size decreased to 800x600 (my
min criteria) which would cause an undesirable horizontal scrollbar to
appear, forcing the viewer to have to scroll horizontally to view all
the content. This is caused by the fixed width declared for every div.
This can be cured by incorporating percentage values instead.

--
Gus