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.

Making two column layout work with IE

I can see that this issue has been much talked about in these fourms, but it seems as if every case is a little different. On http://keywords.oxus.net/ I was able to get two columns to appear side by side with the following code. However, it doesn't seem to work well on Internet Explorer on the Mac. It is fine in Safari and Camino, but I haven't tried any Window based browsers. I would greatly appreciate any tips on making sure this works cross platform and cross browser. Right now the problem is that the right column pops up and down (below the bottom of the left column) depending on the width of the IE browser window.

I had seen those pages when doing google searchs for ths. I don't understand what is going on in the blue robot one. His comments are very mysterious to me:

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}

It seems you have to know what the problem he is solving is in order to understand what he is talking about. Any explanation would be greatly appreciated.

His example also seems to specify exactly how many pixels each part should be. Is it possible to use absolute positioning with percentages so that it all adjusts with the width of the browser window?

The problem I had with the glish.com soultion - and I think this is the same as the default Movable Type solution - is that the content on one side would tend to expand to the whole width of the screen when the content on the other side wasn't long enough.

Post 1 - It is reffering to Internet Explorers broken box model. eg, you define a box 200px wide. You add a 1px border to it. the border should go outside the box, making it 202 px wide. In IE, it goes inside the box, and is wrong.

Post 2 - With the Glish code, is this on the mac or cross-browser?

If one of our members helps you, please click the icon to add to their reputation!No support via email or private message - use the forums!
Before you ask, have you Searched?

Now, on my browser, when the text is small, the right menu wraps around to take up the whole screen if the left side isn't long enough. I believe that this CSS is the same as the one from glish.com in how it handles the two columns. I don't have a windows PC to test how it looks there.

Give up

I have given up. I am not a CSS junkie, and it seems like the best way to meet my objectives (truly cross-platform support for any browser) would be to use tables. Moreover, I learned that tables can be manipulated via a stylesheet with tags like:

td.content {...}

so I can still easily change the style - if not the layout, with CSS. It would be nice if all browsers supported CSS the same way, but they don't, so this will have to do for now.

Note that the test site is now an experiment with table/CSS mixing so it no longer reflects the glish.com design.