Question

On saveadullam.org/pages/media.html, the main text section correctly covers the full width in Chrome, Safari, and Opera. But in IE7 and FF3, it only covers 2/3 of the width. See images. The bilingual text is in a table, which I know is taboo, but the problem here is in a div that holds the whole table, and not within a table-based layout

I know that IE has its rendering problems, but here IE and FF misbehave the same way. (The stylesheet is here.)

What is the problem?

(Edit: Solved for FF, but not for IE.)

Answer 1

Just remove width:70% from .mainBody from css. It works on FF.

.mainBody {
    vertical-align: top;
}